首页 > 文章 > web前端 > 使用 Grunt 优化 WordPress 开发

使用 Grunt 优化 WordPress 开发

WBOY原创: 2023-09-04 09:29:05876浏览

在本教程中，我们将了解如何使用 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 任务，请将 <code class="inline">.sass-cache 添加到 .gitignore.sass-cache 添加到

<h2>.gitignore</h2>

以防止将编译器缓存添加到您的存储库中。

高级任务

grunt ***我们已经介绍了 Grunt 可以帮助 WordPress 开发的两个关键领域，但让我们更进一步，看看使用任务运行程序的额外功能。

查看文件

我们已经提供了处理文件的任务，为什么不对其进行优化呢？通过上面的任务，我们每次进行更改时都需要运行

，为什么不安装 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'
        }
    }
}

提示：将 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 本身相当，为什么不考虑制作一个尚未想到的任务并与社区分享呢？

资源

咕噜声
Node.js
Grunt 入门

使用的 Grunt 任务

JSHint 咕噜
咕噜丑化
咕噜萨斯
咕噜WPi18n
咕噜手表
咕噜复制
Grunt PHP 文档编写器
咕噜卷曲

以上是使用 Grunt 优化 WordPress 开发的详细内容。更多信息请关注PHP中文网其他相关文章！

php JavaScript node.js json css less npm sass cURL 字符串 class copy JS github http 自动化 WordPress

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：开发适合移动设备的下拉菜单下一篇：实现功能的函数()

查看更多