In diesem Tutorial erfahren Sie, wie Sie Grunt gezielt einsetzen, um Ihren WordPress-Entwicklungsworkflow zu unterstützen und zu beschleunigen.
Grunt ist ein JavaScript-Task-Runner, der über NPM installiert und auf Ihrem Server ausgeführt wird. Um die Informationen in diesem Tutorial nutzen zu können, benötigen Sie Befehlszeilenzugriff auf den Server. Der Kürze halber empfehle ich Ihnen, dieses Tutorial zu lesen, um Grunt zum Laufen zu bringen und einsatzbereit zu machen.
Grunt ist ein bewährter Task-Runner, der auf vielen verschiedenen Plattformen vielfältig eingesetzt werden kann. Hier betrachten wir die Definition der soliden Grundlage der WordPress-Entwicklung.
Grunts Community ist sehr stark, was zur Entwicklung eines riesigen Katalogs an Plugins geführt hat. Es ist leicht, sich zu verirren und viel Zeit damit zu verbringen, zu suchen und zu prüfen, welche davon am besten geeignet sind.
Was sind also einige allgemeine Aufgaben, die ein WordPress-Theme oder -Plugin erfüllen oder bereitstellen muss?
Grunt hat ein sehr erfolgreiches WordPress-spezifisches Lokalisierungspaket namens grunt-wp-i18n. Dieses Grunt-Paket ist von unschätzbarem Wert, da es Ihren Theme-/Plugin-Ordner nach allen Übersetzungszeichenfolgen durchsucht und die.pot文件。然后可以使用此.pot文件转换.po和.mo-Dateien am angegebenen Speicherort kompiliert, damit andere Benutzer Ihr Theme/Plugin übersetzen können.
Um ein Paket zu konfigurieren, fügen Sie Folgendes zu denGruntfile.jsinitConfigOptionen hinzu:
makepot: { target: { options: { include: [ 'path/to/some/file.php' ], type: 'wp-plugin' // or `wp-theme` } } }
Dann rufen Sie die Grunt-Aufgabe (im OrdnerGruntfile.js) wie folgt auf:
grunt makepot
Ihr gesamter Ordner wird gescannt und alle Zeichenfolgen stimmen mit den Pot-Dateien überein.
Alle Themes und Plugins verwenden regelmäßig JavaScript- und CSS-Dateien. Leider wird die Notwendigkeit von Entwicklungs- und Produktionsversionen von Dateien oft ignoriert.
Wenn ich den Tipps von WordPress selbst folge, möchte ich sicherstellen, dass ich die Datei vollständig auskommentiert und verkleinert habe:
文件名.js文件名.min.js文件名.css文件名.min.cssUm dies ohne irgendeine Form von Task-Runner zu tun, müssen Sie die in WordPress während der Entwicklung registrierte Asset-URL ändern, um die geänderte, nicht minimierte Version anzuzeigen, bevor Sie das Update mit irgendeiner Form von JavaScript- und CSS-Kompressoren veröffentlichen, und dann wieder zu registrierten URLs wechseln. Das macht überhaupt keinen Spaß.
Mit Grunt können Sie das Uglify-Paket verwenden, um JavaScript-Dateien dynamisch zu minimieren und zu optimieren. Zur weiteren Nutzung von CSS können wir auch Sass-Aufgaben verwenden, um Sass-Dateien dynamisch in CSS zu kompilieren. Für das, was es wert ist, verwende ich Sass, weil WordPress unter der Haube Sass verwendet, aber Grunt hat auch einen LESS-Compiler.
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' }] } }
Tipp: Wenn Sie Sass-Aufgaben verwenden, fügen Sie bitte.sass-cache添加到.gitignore.sass-cachezu
.gitignore
hinzu um zu verhindern, dass der Compiler-Cache zu Ihrem Repository hinzugefügt wird.
Erweiterte Aufgabengrunt ***Wir haben bereits zwei Schlüsselbereiche abgedeckt, in denen Grunt bei der WordPress-Entwicklung helfen kann, aber gehen wir noch einen Schritt weiter und schauen uns die zusätzlichen Möglichkeiten der Verwendung eines Task-Runners an.
Dateien anzeigen
grunt watch
jshint: { files: [ 'assets/js/filename.js', 'assets/dynamic/paths/**/*.js' ], options: { expr: true, globals: { jQuery: true, console: true, module: true, document: true } } }
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' } } }
提示：将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 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？
Das obige ist der detaillierte Inhalt vonOptimierung der WordPress-Entwicklung mit Grunt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
DJVU in PDF umwandeln
Tutorial zur Linux-Systeminstallation
Der Server kann auf der Computerlösung nicht gefunden werden
Die Rolle des Formatfactory-Tools
Der Unterschied und Zusammenhang zwischen Java und Javascript
Was bedeutet Harmonios?
Es gibt verschiedene Arten von Browserkerneln
Was ist internet.exe?
