Grunt を使用した WordPress 開発の最適化-jsチュートリアル-php.cn

使用 Grunt 优化 WordPress 开发

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

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

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

一般的なタスク

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

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

WordPress 翻訳機能を使用して言語文字列をローカライズする
アセットファイルの管理。つまり、開発および縮小されたバージョンの 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 を .gitignore ## に追加します。 # コンパイラキャッシュがリポジトリに追加されないようにします。 高度なタスク

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'
        }
    }
}

ログイン後にコピー

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