使用 Grunt 優化 WordPress 開發
在本教學中，我們將了解如何使用 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 任務，請將<i>.sass-cache</i> 新增至<i>.gitignore </i> 以防止將編譯器快取新增到您的儲存庫中。
高階任務
我們已經介紹了 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'
}
}
}
提示：将 <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 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？
资源
- 咕噜声
- Node.js
- Grunt 入门
使用的 Grunt 任务
- JSHint 咕噜
- 咕噜丑化
- 咕噜萨斯
- 咕噜WPi18n
- 咕噜手表
- 咕噜复制
- Grunt PHP 文档编写器
- 咕噜卷曲
以上是使用 Grunt 優化 WordPress 開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
