在本教學中，我們將了解如何使用 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 資料夾中）：
正在掃描您的整個資料夾，並且所有字串都符合 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 任務，請將<i>.sass-cache</i> 新增至<i>.gitignore </i> 以防止將編譯器快取新增到您的儲存庫中。
高階任務
我們已經介紹了 Grunt 可以幫助 WordPress 開發的兩個關鍵領域，但讓我們更進一步，看看使用任務運行程式的額外功能。
查看檔案
我們已經提供了處理文件的任務，為什麼不對其進行最佳化呢？透過上面的任務，我們每次進行更改時都需要執行 grunt *** ，為什麼不安裝 grunt-contrib-watch 套件呢？配置完成後，這將指示 Grunt 在每次偵測到檔案變更時執行這些任務。
急！不再需要在每次檔案變更時執行 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'
}
}
}
登入後複製
提示：将 <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">.gitignore 以防止任务作为关联文件添加到您的存储库中。
结论
正如您从上面的任务中看到的，Grunt 可用于帮助自动化 WordPress 开发，让您有更多时间专注于编写代码，而不是管理代码。
我们只详细介绍了 WordPress 的一些任务，但还有许多其他软件包可以满足项目特定需求，例如图像优化任务等等，所以去探索吧！
Grunt 现在是一个完善的任务运行器，并且文档与 WordPress 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？
资源
使用的 Grunt 任务
- JSHint 咕噜
- 咕噜丑化
- 咕噜萨斯
- 咕噜WPi18n
- 咕噜手表
- 咕噜复制
- Grunt PHP 文档编写器
- 咕噜卷曲
以上是使用 Grunt 優化 WordPress 開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
