使用 Grunt 優化 WordPress 開發-js教程-PHP中文網

使用 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 以防止任务作为关联文件添加到您的存储库中。