首頁 >web前端 >js教程 >使用 Grunt 優化 WordPress 開發

使用 Grunt 優化 WordPress 開發

WBOY原創: 2023-09-04 09:29:05905瀏覽

使用 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 任務，請將.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 是一組類，其中包含建立選項頁面和元框。

為了讓開發單一欄位更容易，我有一個如下的檔案結構：

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

上一篇：開發適合行動裝置的下拉式選單下一篇：開發適合行動裝置的下拉式選單

看更多