使用 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: '/*!   filename.min.js  */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: '/*!   filename.js  */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: '/*!   filename.min.css  */n',            style: 'compressed'        },        files: [{            expand: true,            cwd: 'assets/scss',            src: [                '*.scss'            ],            dest: 'assets/css',            ext: '.min.css'        }]    },    dev: {        options: {            banner: '/*!   filename.css  */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 是一组类，其中包括创建选项页面和元框。

为了使开发单个字段更容易，我有一个如下的文件结构：

萤石开放平台

萤石开放平台：为企业客户提供全球化、一站式硬件智能方案。

106 查看详情

assets/├── js/|   ├── filename.js├── fields/    ├── text/    |   ├── js/    |       ├── text.js    ├── select/        ├── js/            ├── select.js

这使得找到我正在研究的领域并仅更改该领域所需的 JavaScript 变得非常容易。

从用户的角度来看，我只想提供一个 JavaScript 文件，其中包含所有常见的和基于字段的 JavaScript。让我们使用 grunt-contrib-uglify 任务来完成此任务。

uglify: {    dist: {        options: {            banner: '/*!   filename.min.js  */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: '/*!   filename.js  */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: '/*!   filename.min.css  */n',                    style: 'compressed'                },                files: [{                    expand: true,                    cwd: 'assets/scss',                    src: [                        '*.scss'                    ],                    dest: 'assets/css',                    ext: '.min.css'                }]            },            dev: {                options: {                    banner: '/*!   filename.css  */n',                    style: 'expanded'                },                files: [{                    expand: true,                    cwd: 'assets/scss',                    src: [                        '*.scss'                    ],                    dest: 'assets/css',                    ext: '.css'                }]            }        },        uglify: {            dist: {                options: {                    banner: '/*!   filename.min.js  */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: '/*!   filename.js  */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 开发的详细内容，更多请关注创想鸟其它相关文章！