Optimiser le développement WordPress avec Grunt

Dans ce tutoriel, nous apprendrons comment utiliser Grunt spécifiquement pour vous aider et accélérer votre flux de travail de développement WordPress.

Grunt est un exécuteur de tâches JavaScript qui s'installe via NPM et s'exécute sur votre serveur. Pour utiliser les informations de ce didacticiel, vous devez accéder au serveur en ligne de commande. Par souci de brièveté, je vous recommande de vous référer à ce didacticiel pour que Grunt soit opérationnel, opérationnel et prêt à l'emploi.

Grunt est un exécuteur de tâches éprouvé qui peut être utilisé de différentes manières sur de nombreuses plates-formes différentes. Ici, nous verrons comment définir les bases solides du développement WordPress.

Tâches courantes

La communauté Grunt est très forte, ce qui a conduit au développement d’un énorme catalogue de plugins. Il est facile de se perdre et de passer beaucoup de temps à chercher et à examiner lesquels utiliser.

Alors, quelles sont les tâches courantes qu’un thème ou un plugin WordPress doit accomplir ou fournir ?

1. Localisez les chaînes de langue à l'aide de la fonctionnalité de traduction de WordPress
2. Gestion des dossiers d'actifs. Autrement dit, en utilisant des versions développées et réduites de fichiers JavaScript et CSS.

Localisation

Grunt propose un package de localisation spécifique à WordPress très réussi appelé grunt-wp-i18n. Ce package Grunt est inestimable car il analysera votre dossier thème/plugin pour toutes les chaînes de traduction et compilera .pot 文件。然后可以使用此 .pot 文件转换 .po 和 .mo fichiers à l'emplacement spécifié pour que d'autres utilisateurs traduisent votre thème/plugin.

Pour configurer un package, ajoutez ce qui suit aux Gruntfile.js initConfig options :

makepot: {
    target: {
        options: {
            include: [
                'path/to/some/file.php'
            ],
            type: 'wp-plugin' // or `wp-theme`
        }
    }
}

Appelez ensuite la tâche Grunt (dans le dossier Gruntfile.js) comme ceci :

grunt makepot

Votre dossier entier est en cours d'analyse et toutes les chaînes correspondent aux fichiers pot.

Fichier d'actifs

Tous les thèmes et plugins utilisent régulièrement des fichiers JavaScript et CSS. Malheureusement, le besoin de versions de développement et de production des fichiers est souvent ignoré.

En suivant les conseils de WordPress lui-même, mon objectif est de m'assurer d'avoir entièrement commenté et minifié le fichier :

• 文件名.js
• 文件名.min.js
• 文件名.css
• 文件名.min.css

Pourquoi? Je veux savoir ce qui se passe dans ces fichiers, mais je veux aussi savoir que mes visiteurs obtiennent des versions optimisées de ces fichiers.

Pour faire cela sans une certaine forme d'exécuteur de tâches, il faut changer l'URL de l'actif enregistré dans WordPress pendant le développement pour voir la version non minée modifiée, avant de publier la mise à jour à l'aide d'une forme de compresseurs JavaScript et CSS, puis revenir aux URL enregistrées. Ce n’est pas amusant du tout.

Avec Grunt, vous pouvez utiliser le package Uglify pour réduire et optimiser dynamiquement les fichiers JavaScript. Pour utiliser davantage CSS, nous pouvons également utiliser des tâches Sass pour compiler dynamiquement des fichiers Sass en CSS. Pour ce que ça vaut, j'utilise Sass parce que WordPress utilise Sass sous le capot, mais Grunt a également un compilateur LESS.

uglify: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            report: 'gzip'
        },
        files: {
            'assets/js/filename.min.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            beautify: true,
            compress: false,
            mangle: false
        },
        files: {
            'assets/js/filename.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    }
}

sass: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            style: 'compressed'
        },
        files: [{
            expand: true,
            cwd: 'assets/scss',
            src: [
                '*.scss'
            ],
            dest: 'assets/css',
            ext: '.min.css'
        }]
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: 'assets/scss',
            src: [
                '*.scss'
            ],
            dest: 'assets/css',
            ext: '.css'
        }]
    }
}

Astuce : Si vous utilisez des tâches Sass, veuillez ajouter <code class="inline"><i>.sass-cache</i> 添加到 <i>.gitignore</i>.sass-cache à

<h2 id="gitignore">.gitignore</h2>

pour empêcher l'ajout du cache du compilateur à votre référentiel.

Tâches avancées

grunt ***Nous avons déjà couvert deux domaines clés dans lesquels Grunt peut vous aider dans le développement de WordPress, mais allons plus loin et examinons les capacités supplémentaires liées à l'utilisation d'un exécuteur de tâches.

Afficher les fichiers

Nous proposons déjà des tâches de traitement des fichiers, pourquoi ne pas les optimiser ? Avec la tâche ci-dessus, nous devons exécuter

chaque fois que nous apportons une modification, pourquoi ne pas installer le package grunt-contrib-watch ? Une fois configuré, cela demandera à Grunt d'exécuter ces tâches chaque fois qu'une modification de fichier est détectée.

grunt watch

Urgent ! Plus besoin d'exécuter Grunt à chaque fois qu'un fichier change, démarrez simplement l'observateur et modifiez le fichier.

Qualité JavaScript

Ne serait-il pas agréable d'exécuter JSHint sur nos fichiers JavaScript pour retrouver ces erreurs ou points-virgules manquants ? Installez simplement la tâche grunt-contrib-jshint et installez-la sur la tâche observateur avant de compiler le fichier. Grunt vous avertira désormais de toute erreur et cessera d'exécuter d'autres tâches.

jshint: {
    files: [
        'assets/js/filename.js',
        'assets/dynamic/paths/**/*.js'
    ],
    options: {
        expr: true,
        globals: {
            jQuery: true,
            console: true,
            module: true,
            document: true
        }
    }
}

Fusionner les actifs

Cela m'est particulièrement utile lors du développement du framework Fluent. Fluent Framework est un ensemble de classes qui incluent la création de pages d'options et de méta-boîtes. 🎜 🎜Pour faciliter le développement de champs individuels, j'ai une structure de fichiers comme celle-ci : 🎜

assets/
├── js/
|   ├── filename.js
├── fields/
    ├── text/
    |   ├── js/
    |       ├── text.js
    ├── select/
        ├── js/
            ├── select.js

🎜Cela permet de trouver très facilement la zone sur laquelle je travaille et de modifier uniquement le JavaScript requis pour cette zone. 🎜

从用户的角度来看，我只想提供一个 JavaScript 文件，其中包含所有常见的和基于字段的 JavaScript。让我们使用 grunt-contrib-uglify 任务来完成此任务。

uglify: {
    dist: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            report: 'gzip'
        },
        files: {
            'assets/js/filename.min.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    },
    dev: {
        options: {
            banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
            beautify: true,
            compress: false,
            mangle: false
        },
        files: {
            'assets/js/filename.js' : [
                'assets/path/to/file.js',
                'assets/path/to/another/file.js',
                'assets/dynamic/paths/**/*.js'
            ]
        }
    }
}

通过此配置，通过 JSHint 后，会将所有 JavaScript 文件合并为开发文件和生产文件。

复制文件

WordPress.org 需要 Readme.txt 文件来详细说明主题/插件信息，但 GitHub 和 BitBucket 等版本控制系统更喜欢 Readme.md 文件。我们不需要手动复制或保持这些文件同步。让 Grunt 帮我们做这件事吧！

安装 grunt-contrib-copy 任务并按如下方式配置：

copy: {
    dist: {
        src: 'readme.txt',
        dest: 'README.md'
    }
}

下载数据

另一个有用的 Grunt 任务是 Grunt cURL 包。 Fluent 框架字段之一需要访问 Google Fonts API 数据。按照 Google 的建议加载此内容将是每次加载页面时的 HTTP 请求。或者，如果您手动复制文件内容，则可能会面临过时的风险。两全其美的方法是使用 Grunt Curl 来保存请求并获取更新。

为了保持最新状态，我们只需加载 cURL 任务，为其提供从中获取字体数据的 URL 以及保存响应的位置。

curl: {
    'google-fonts-source': {
        src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******',
        dest: 'assets/vendor/google-fonts-source.json'
    }
}

现在，每次我们运行任务时，都会下载最新的字体列表，并将其保存到框架文件中。

文档

此任务最适合用于许多开发人员都会窥探的主题、插件和框架。对于那些探索代码库的人来说，上下文从来都不是坏事。

PHP Documentor 是一个用于自动生成该数据的出色工具。它还可以帮助您专注于在代码中提供有意义的 DocBlock。

phpdocumentor: {
    dist: {
        options: {
            ignore: 'node_modules'
        }
    }
}

提示：将 <i>docs</i> 添加到您的 <i>.gitignore </i>如果您不想提交文档及其所有缓存文件。

把它们放在一起

这是用于执行上述任务的 package.json 和 Gruntfile.js。

package.json

{
    "name": "package-name",
    "version": "1.0.0",
    "description": "...",
    "main": "filename.php",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "http://repo-url.com"
    },
    "keywords": [
        "wordpress"
    ],
    "author": "Your Name",
    "license": "GPL",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-jshint": "~0.8.0",
        "grunt-contrib-sass": "^0.7.3",
        "grunt-contrib-uglify": "~0.3.3",
        "grunt-curl": "*",
        "grunt-phpdocumentor": "~0.4.1",
        "grunt-wp-i18n": "~0.4.0"
    }
}

Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        copy: {
            dist: {
                src: 'readme.txt',
                dest: 'README.md'
            }
        },
        curl: {
            'google-fonts-source': {
                src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******',
                dest: 'assets/vendor/google-fonts-source.json'
            }
        },
        makepot: {
            target: {
                options: {
                    include: [
                        'path/to/some/file.php'
                    ],
                    type: 'wp-plugin' // or `wp-theme`
                }
            }
        },
        jshint: {
            files: [
                'assets/js/filename.js',
                'assets/dynamic/paths/**/*.js'
            ],
            options: {
                expr: true,
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                }
            }
        },
        phpdocumentor: {
            dist: {
                options: {
                    ignore: 'node_modules'
                }
            }
        },
        sass: {
            dist: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    style: 'compressed'
                },
                files: [{
                    expand: true,
                    cwd: 'assets/scss',
                    src: [
                        '*.scss'
                    ],
                    dest: 'assets/css',
                    ext: '.min.css'
                }]
            },
            dev: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    style: 'expanded'
                },
                files: [{
                    expand: true,
                    cwd: 'assets/scss',
                    src: [
                        '*.scss'
                    ],
                    dest: 'assets/css',
                    ext: '.css'
                }]
            }
        },
        uglify: {
            dist: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    report: 'gzip'
                },
                files: {
                    'assets/js/filename.min.js' : [
                        'assets/path/to/file.js',
                        'assets/path/to/another/file.js',
                        'assets/dynamic/paths/**/*.js'
                    ]
                }
            },
            dev: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
                    beautify: true,
                    compress: false,
                    mangle: false
                },
                files: {
                    'assets/js/filename.js' : [
                        'assets/path/to/file.js',
                        'assets/path/to/another/file.js',
                        'assets/dynamic/paths/**/*.js'
                    ]
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-curl');
    grunt.loadNpmTasks('grunt-phpdocumentor');
    grunt.loadNpmTasks('grunt-wp-i18n');

    grunt.registerTask('default', [
        'jshint',
        'uglify:dev',
        'uglify:dist',
        'sass:dev',
        'sass:dist',
        'makepot',
        'copy'
    ]);

    grunt.registerTask('docs', [
        'phpdocumentor:dist'
    ]);

    grunt.registerTask('googlefonts', [
        'curl:google-fonts-source'
    ]);

};

提示：添加 <i>node_modules</i> 和 <i>npm-debug .log</i> 到您的 class="inline"><i>.gitignore</i> 以防止任务作为关联文件添加到您的存储库中。

结论

正如您从上面的任务中看到的，Grunt 可用于帮助自动化 WordPress 开发，让您有更多时间专注于编写代码，而不是管理代码。

我们只详细介绍了 WordPress 的一些任务，但还有许多其他软件包可以满足项目特定需求，例如图像优化任务等等，所以去探索吧！

Grunt 现在是一个完善的任务运行器，并且文档与 WordPress 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？

资源

• 咕噜声
• Node.js
• Grunt 入门

使用的 Grunt 任务

• JSHint 咕噜
• 咕噜丑化
• 咕噜萨斯
• 咕噜WPi18n
• 咕噜手表
• 咕噜复制
• Grunt PHP 文档编写器
• 咕噜卷曲

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!