在本教程中，我们将了解如何使用 grunt，特别是帮助和加快您的 wordpress 开发工作流程。
grunt 是一个通过 npm 安装并在您的服务器上运行的 javascript 任务运行程序。要使用本教程中的信息，您需要通过命令行访问服务器。为了简洁起见，我建议您参考本教程来设置、运行 grunt 并准备使用。
grunt 是一个经过验证的任务运行器，可以在许多不同的平台上以多种不同的方式使用。在这里，我们将着眼于定义 wordpress 开发的坚实基础。
常见任务grunt 的社区非常强大，这导致了巨大的插件目录的开发。很容易迷失方向并花费大量时间搜索和审查要使用哪些。
那么 wordpress 主题或插件需要完成或提供哪些常见任务？
使用 wordpress 翻译功能本地化语言字符串资产文件的管理。也就是说，使用 javascript 和 css 文件的开发和缩小版本。本地化grunt 有一个非常成功的 wordpress 专用本地化包，名为 grunt-wp-i18n。这个 grunt 包非常宝贵，因为它将扫描您的主题/插件文件夹，查找所有翻译字符串，并在指定位置编译 .pot 文件。然后可以使用此 .pot 文件转换 .po 和 .mo 文件，以便其他用户翻译您的主题/插件。
要配置包，请将以下内容添加到 gruntfile.js initconfig 选项中：
makepot: { target: { options: { include: [ 'path/to/some/file.php' ], type: 'wp-plugin' // or `wp-theme` } }}
然后像这样调用 grunt 任务（在 gruntfile.js 文件夹中）：
grunt makepot
正在扫描您的整个文件夹，并且所有字符串都符合 pot 文件。
资产文件所有主题和插件都定期使用 javascript 和 css 文件。不幸的是，很多时候对文件的开发和生产版本的需求被忽视。
根据 wordpress 本身的提示，我的目标是确保我已完全评论并缩小了文件：
文件名.js文件名.min.js文件名.css文件名.min.css为什么？我想知道这些文件中发生了什么，但我也想知道我的访问者正在获得这些文件的优化版本。
要在没有某种形式的任务运行程序的情况下执行此操作，意味着在开发过程中切换在 wordpress 中注册的资产 url 以查看更改后的未缩小版本，在发布更新之前使用某种形式的 javascript 和 css 压缩器，然后切换返回已注册的 url。这一点也不好玩。
借助 grunt，您可以使用 uglify 包动态缩小和优化 javascript 文件，为了进一步使用 css，我们还可以使用 sass 任务将 sass 文件动态编译为 css。就其价值而言，我使用 sass，因为 wordpress 在底层使用的是 sass，但 grunt 也有一个 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' }] }}
提示：如果使用 sass 任务，请将 .sass-cache 添加到 .gitignore 以防止将编译器缓存添加到您的存储库中。
高级任务我们已经介绍了 grunt 可以帮助 wordpress 开发的两个关键领域，但让我们更进一步，看看使用任务运行程序的额外功能。
查看文件我们已经提供了处理文件的任务，为什么不对其进行优化呢？通过上面的任务，我们每次进行更改时都需要运行 grunt *** ，为什么不安装 grunt-contrib-watch 包呢？配置完成后，这将指示 grunt 在每次检测到文件更改时运行这些任务。
grunt watch
急！不再需要在每次文件更改时运行 grunt，只需启动观察器并编辑文件即可。
javascript 质量在我们的 javascript 文件上运行 jshint 来追踪这些错误或丢失的分号不是很好吗？只需在编译文件之前安装 grunt-contrib-jshint 任务并将其安装到观察器任务即可。现在，grunt 将警告您任何错误并停止运行进一步的任务。
jshint: { files: [ 'assets/js/filename.js', 'assets/dynamic/paths/**/*.js' ], options: { expr: true, globals: { jquery: true, console: true, module: true, document: true } }}
合并资产这对我开发 fluent 框架特别有用。 fluent framework 是一组类，其中包括创建选项页面和元框。
为了使开发单个字段更容易，我有一个如下的文件结构：
assets/├── js/| ├── filename.js├── fields/ ├── text/ | ├── js/ | ├── text.js ├── select/ ├── js/ ├── select.js
这使得找到我正在研究的领域并仅更改该领域所需的 javascript 变得非常容易。
从用户的角度来看，我只想提供一个 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' } }}
提示：将 docs 添加到您的 .gitignore 如果您不想提交文档及其所有缓存文件。
把它们放在一起这是用于执行上述任务的 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' ]);};
提示：添加 node_modules 和 npm-debug .log 到您的 class=inline>.gitignore 以防止任务作为关联文件添加到您的存储库中。
结论正如您从上面的任务中看到的，grunt 可用于帮助自动化 wordpress 开发，让您有更多时间专注于编写代码，而不是管理代码。
我们只详细介绍了 wordpress 的一些任务，但还有许多其他软件包可以满足项目特定需求，例如图像优化任务等等，所以去探索吧！
grunt 现在是一个完善的任务运行器，并且文档与 wordpress 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？
资源咕噜声node.jsgrunt 入门使用的 grunt 任务jshint 咕噜咕噜丑化咕噜萨斯咕噜wpi18n咕噜手表咕噜复制grunt php 文档编写器咕噜卷曲以上就是使用 grunt 优化 wordpress 开发的详细内容。