Optimizing WordPress development with Grunt

In this tutorial, we’ll take a look at how to use Grunt specifically to help and speed up your WordPress development workflow.

Grunt is a JavaScript task runner that installs via NPM and runs on your server. To use the information in this tutorial, you need command line access to the server. For the sake of brevity, I recommend you refer to this tutorial to get Grunt up, running, and ready to use.

Grunt is a proven task runner that can be used in many different ways on many different platforms. Here, we’ll look at defining the solid foundation of WordPress development.

Common tasks

Grunt's community is very strong, which has led to the development of a huge catalog of plugins. It's easy to get lost and spend a lot of time searching and reviewing which ones to use.

So what are some common tasks that a WordPress theme or plugin needs to accomplish or provide?

1. Localize language strings using the WordPress translation feature
2. Management of asset files. That is, using developed and minified versions of JavaScript and CSS files.

Localization

Grunt has a very successful WordPress-specific localization package called grunt-wp-i18n. This Grunt package is invaluable because it will scan your theme/plugin folder for all translation strings and compile the .pot file in the specified location. This .pot file can then be used to convert the .po and .mo files for other users to translate your theme/plugin.

To configure the package, add the following to the Gruntfile.js initConfig options:

makepot: {
    target: {
        options: {
            include: [
                'path/to/some/file.php'
            ],
            type: 'wp-plugin' // or `wp-theme`
        }
    }
}

Then call the Grunt task (in the Gruntfile.js folder) like this:

grunt makepot

Your entire folder is being scanned and all strings match pot files.

Asset File

All themes and plugins regularly use JavaScript and CSS files. Unfortunately, many times the need for development and production versions of files is ignored.

Following prompts from WordPress itself, my goal was to make sure I had fully commented out and minified the file:

• File name.js
• File name.min.js
• File name.css
• File name.min.css

Why? I want to know what's going on in these files, but I also want to know that my visitors are getting optimized versions of these files.

To do this without some form of task runner means switching the asset URL registered in WordPress during development to see the changed unminified version, before publishing the update using some form JavaScript and CSS compressors, and then toggle back to the registered URL. This is no fun at all.

With Grunt, you can use the Uglify package to dynamically minify and optimize JavaScript files. To further use CSS, we can also use Sass tasks to dynamically compile Sass files into CSS. For what it's worth, I use Sass because WordPress uses Sass under the hood, but Grunt also has a 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'
        }]
    }
}

Tip: If using sass tasks, add <i>.sass-cache</i> to <i>.gitignore </i> to prevent the compiler cache from being added to your repository.

Advanced tasks

We’ve covered two key areas where Grunt can help with WordPress development, but let’s take it a step further and look at the additional capabilities of using a task runner.

View Files

We already provide tasks for processing files, why not optimize them? With the above task, we need to run grunt *** every time we make a change, why not install the grunt-contrib-watch package? Once configured, this will instruct Grunt to run these tasks every time a file change is detected.

grunt watch

urgent! No more running Grunt every time a file changes, just start the observer and edit the file.

JavaScript Quality

Wouldn't it be nice to run JSHint on our JavaScript files to track down these errors or missing semicolons? Just install the grunt-contrib-jshint task and install it to the observer task before compiling the file. Grunt will now warn you of any errors and stop running further tasks.

jshint: {
    files: [
        'assets/js/filename.js',
        'assets/dynamic/paths/**/*.js'
    ],
    options: {
        expr: true,
        globals: {
            jQuery: true,
            console: true,
            module: true,
            document: true
        }
    }
}

Merge assets

This is particularly useful for me when developing the Fluent framework. Fluent Framework is a set of classes that includes creating options pages and meta boxes.

To make developing individual fields easier, I have a file structure like the following:

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

This makes it very easy to find the area I'm working on and change only the JavaScript needed for that area.

从用户的角度来看，我只想提供一个 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 文档编写器
• 咕噜卷曲

The above is the detailed content of Optimizing WordPress development with Grunt. For more information, please follow other related articles on the PHP Chinese website!