在本教程中，我们将了解如何使用 Grunt，特别是帮助和加快您的 WordPress 开发工作流程。
Grunt 是一个通过 NPM 安装并在您的服务器上运行的 JavaScript 任务运行程序。要使用本教程中的信息，您需要通过命令行访问服务器。为了简洁起见，我建议您参考本教程来设置、运行 Grunt 并准备使用。
Grunt 是一个经过验证的任务运行器，可以在许多不同的平台上以多种不同的方式使用。在这里，我们将着眼于定义 WordPress 开发的坚实基础。
Grunt 的社区非常强大，这导致了巨大的插件目录的开发。很容易迷失方向并花费大量时间搜索和审查要使用哪些。
那么 WordPress 主题或插件需要完成或提供哪些常见任务？
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 任务，请将 <code class="inline"><i>.sass-cache</i> 添加到 <i>.gitignore</i>.sass-cache 添加到
<h2>.gitignore</h2>以防止将编译器缓存添加到您的存储库中。
grunt ***我们已经介绍了 Grunt 可以帮助 WordPress 开发的两个关键领域，但让我们更进一步，看看使用任务运行程序的额外功能。
查看文件
grunt watch
在我们的 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。让我们使用 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 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？
以上是使用 Grunt 优化 WordPress 开发的详细内容。更多信息请关注PHP中文网其他相关文章！
