Grunt を使用した WordPress 開発の最適化

このチュートリアルでは、特に WordPress 開発ワークフローを支援および高速化するために Grunt を使用する方法を見ていきます。

Grunt は、NPM 経由でインストールされ、サーバー上で実行される JavaScript タスク ランナーです。このチュートリアルの情報を使用するには、サーバーへのコマンド ライン アクセスが必要です。簡潔にするために、このチュートリアルを参照して Grunt を起動、実行し、使用できるようにすることをお勧めします。

Grunt は、さまざまなプラットフォームでさまざまな方法で使用できる実績のあるタスク ランナーです。ここでは、WordPress 開発の強固な基盤の定義について見ていきます。

一般的なタスク

Grunt のコミュニティは非常に強力であり、それがプラグインの膨大なカタログの開発につながりました。どれを使用すればよいか迷ってしまい、検索や検討に多くの時間を費やしてしまいがちです。

それでは、WordPress テーマまたはプラグインが実行または提供する必要がある一般的なタスクにはどのようなものがあるでしょうか?

1. WordPress 翻訳機能を使用して言語文字列をローカライズする
2. アセット ファイルの管理。つまり、開発および縮小されたバージョンの JavaScript および CSS ファイルを使用します。

ローカリゼーション

Grunt には、grunt-wp-i18n と呼ばれる非常に成功した WordPress 固有のローカリゼーション パッケージがあります。この Grunt パッケージは、テーマ/プラグイン フォルダーをスキャンしてすべての翻訳文字列を探し、指定された場所に .pot ファイルをコンパイルするため、非常に貴重です。この .pot ファイルを使用して、他のユーザーがテーマ/プラグインを翻訳できるように .po および .mo ファイルを変換できます。

パッケージを構成するには、Gruntfile.js initConfig オプションに次の内容を追加します。 リーリー

次に、次のように Grunt タスク (

Gruntfile.js フォルダー内) を呼び出します。 リーリー

フォルダー全体がスキャンされており、すべての文字列がポット ファイルと一致します。

アセット ファイル

すべてのテーマとプラグインは定期的に JavaScript と CSS ファイルを使用します。残念ながら、多くの場合、ファイルの開発バージョンと製品バージョンの必要性は無視されます。

WordPress 自体からのプロンプトに従い、ファイルを完全にコメントアウトして縮小したことを確認することが私の目標でした。

• ファイル名.js
• ファイル名.min.js
• ファイル名.css
• ファイル名.min.css
なぜ？これらのファイルで何が起こっているのか知りたいのですが、訪問者がこれらのファイルの最適化されたバージョンを取得していることも知りたいです。

何らかの形式のタスク ランナーを使用せずにこれを行うには、開発中に WordPress に登録されているアセット URL を切り替えて、変更された縮小されていないバージョンを確認してから、何らかの形式の JavaScript および CSS コンプレッサーを使用して更新を公開し、その後、登録された URL に切り替えることを意味します。これではまったく面白くありません。

Grunt では、Uglify パッケージを使用して JavaScript ファイルを動的に縮小および最適化できます。CSS をさらに使用するには、Sass タスクを使用して Sass ファイルを CSS に動的にコンパイルすることもできます。 WordPress は内部で Sass を使用しているため、私は Sass を使用していますが、Grunt には LESS コンパイラもあります。

リーリー リーリー

ヒント: Sass タスクを使用する場合は、.sass-cache<i></i> を .gitignore ## に追加します。 <i></i># コンパイラ キャッシュがリポジトリに追加されないようにします。 高度なタスク

Grunt が WordPress 開発に役立つ 2 つの主要な領域についてはすでに説明しましたが、さらに一歩進めて、タスク ランナーを使用する追加機能を見てみましょう。

＃＃＃ビューファイル＃＃＃

ファイルを処理するタスクはすでに提供されていますが、それを最適化しないのはなぜでしょうか?上記のタスクでは、変更を加えるたびに

grunt ***

を実行する必要があります。なぜ grunt-contrib-watch パッケージをインストールしないのでしょうか?設定が完了すると、ファイルの変更が検出されるたびにこれらのタスクを実行するように Grunt に指示されます。

リーリー ＃＃＃緊急！ファイルが変更されるたびに Grunt を実行する必要はなくなり、オブザーバーを起動してファイルを編集するだけです。

JavaScript の品質

JavaScript ファイルに対して JSHint を実行して、これらのエラーやセミコロンの欠落を追跡できたら良いと思いませんか?ファイルをコンパイルする前に、grunt-contrib-jshint タスクをインストールし、オブザーバー タスクにインストールするだけです。 Grunt はエラーを警告し、それ以降のタスクの実行を停止します。

リーリー

アセットを結合する

これは、Fluent フレームワークを開発するときに特に役立ちます。 Fluent Framework は、オプション ページとメタ ボックスの作成を含むクラスのセットです。

個々のフィールドの開発を容易にするために、次のようなファイル構造を用意しています。

リーリー

これにより、作業している領域を見つけて、その領域に必要な 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'
        }
    }
}

提示：将 <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 文档编写器
• 咕噜卷曲

以上がGrunt を使用した WordPress 開発の最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。