Heim >Web-Frontend >js-Tutorial >Optimierung der WordPress-Entwicklung mit Grunt

Optimierung der WordPress-Entwicklung mit Grunt

WBOYOriginal: 2023-09-04 09:29:05924Durchsuche

使用 Grunt 优化 WordPress 开发

In diesem Tutorial erfahren Sie, wie Sie Grunt gezielt einsetzen, um Ihren WordPress-Entwicklungsworkflow zu unterstützen und zu beschleunigen.

Grunt ist ein JavaScript-Task-Runner, der über NPM installiert und auf Ihrem Server ausgeführt wird. Um die Informationen in diesem Tutorial nutzen zu können, benötigen Sie Befehlszeilenzugriff auf den Server. Der Kürze halber empfehle ich Ihnen, dieses Tutorial zu lesen, um Grunt zum Laufen zu bringen und einsatzbereit zu machen.

Grunt ist ein bewährter Task-Runner, der auf vielen verschiedenen Plattformen vielfältig eingesetzt werden kann. Hier betrachten wir die Definition der soliden Grundlage der WordPress-Entwicklung.

Allgemeine Aufgaben

Grunts Community ist sehr stark, was zur Entwicklung eines riesigen Katalogs an Plugins geführt hat. Es ist leicht, sich zu verirren und viel Zeit damit zu verbringen, zu suchen und zu prüfen, welche davon am besten geeignet sind.

Was sind also einige allgemeine Aufgaben, die ein WordPress-Theme oder -Plugin erfüllen oder bereitstellen muss?

Sprachzeichenfolgen mithilfe der WordPress-Übersetzungsfunktion lokalisieren
Verwaltung von Asset-Dateien. Das heißt, es werden entwickelte und minimierte Versionen von JavaScript- und CSS-Dateien verwendet.

Lokalisierung

Grunt hat ein sehr erfolgreiches WordPress-spezifisches Lokalisierungspaket namens grunt-wp-i18n. Dieses Grunt-Paket ist von unschätzbarem Wert, da es Ihren Theme-/Plugin-Ordner nach allen Übersetzungszeichenfolgen durchsucht und die .pot 文件。然后可以使用此 .pot 文件转换 .po 和 .mo-Dateien am angegebenen Speicherort kompiliert, damit andere Benutzer Ihr Theme/Plugin übersetzen können.

Um ein Paket zu konfigurieren, fügen Sie Folgendes zu den Gruntfile.js initConfig Optionen hinzu:

makepot: {
    target: {
        options: {
            include: [
                'path/to/some/file.php'
            ],
            type: 'wp-plugin' // or `wp-theme`
        }
    }
}

Dann rufen Sie die Grunt-Aufgabe (im Ordner Gruntfile.js) wie folgt auf:

grunt makepot

Ihr gesamter Ordner wird gescannt und alle Zeichenfolgen stimmen mit den Pot-Dateien überein.

Asset-Datei

Alle Themes und Plugins verwenden regelmäßig JavaScript- und CSS-Dateien. Leider wird die Notwendigkeit von Entwicklungs- und Produktionsversionen von Dateien oft ignoriert.

Wenn ich den Tipps von WordPress selbst folge, möchte ich sicherstellen, dass ich die Datei vollständig auskommentiert und verkleinert habe:

文件名.js
文件名.min.js
文件名.css
文件名.min.css

Warum? Ich möchte wissen, was in diesen Dateien vor sich geht, aber ich möchte auch wissen, dass meine Besucher optimierte Versionen dieser Dateien erhalten.

Um dies ohne irgendeine Form von Task-Runner zu tun, müssen Sie die in WordPress während der Entwicklung registrierte Asset-URL ändern, um die geänderte, nicht minimierte Version anzuzeigen, bevor Sie das Update mit irgendeiner Form von JavaScript- und CSS-Kompressoren veröffentlichen, und dann wieder zu registrierten URLs wechseln. Das macht überhaupt keinen Spaß.

Mit Grunt können Sie das Uglify-Paket verwenden, um JavaScript-Dateien dynamisch zu minimieren und zu optimieren. Zur weiteren Nutzung von CSS können wir auch Sass-Aufgaben verwenden, um Sass-Dateien dynamisch in CSS zu kompilieren. Für das, was es wert ist, verwende ich Sass, weil WordPress unter der Haube Sass verwendet, aber Grunt hat auch einen LESS-Compiler.

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

Tipp: Wenn Sie Sass-Aufgaben verwenden, fügen Sie bitte <code class="inline">.sass-cache 添加到 .gitignore.sass-cache zu

<h2>.gitignore</h2>

hinzu um zu verhindern, dass der Compiler-Cache zu Ihrem Repository hinzugefügt wird.

Erweiterte Aufgaben

grunt ***Wir haben bereits zwei Schlüsselbereiche abgedeckt, in denen Grunt bei der WordPress-Entwicklung helfen kann, aber gehen wir noch einen Schritt weiter und schauen uns die zusätzlichen Möglichkeiten der Verwendung eines Task-Runners an.

Dateien anzeigen

Wir bieten bereits Aufgaben zur Bearbeitung von Dateien an, warum nicht diese optimieren? Bei der obigen Aufgabe müssen wir

jedes Mal ausführen, wenn wir eine Änderung vornehmen. Warum nicht das Paket grunt-contrib-watch installieren? Nach der Konfiguration wird Grunt angewiesen, diese Aufgaben jedes Mal auszuführen, wenn eine Dateiänderung erkannt wird.

grunt watch

Dringend! Sie müssen Grunt nicht mehr jedes Mal ausführen, wenn sich eine Datei ändert. Starten Sie einfach den Beobachter und bearbeiten Sie die Datei.

JavaScript-Qualität

Wäre es nicht schön, JSHint auf unseren JavaScript-Dateien auszuführen, um diese Fehler oder fehlenden Semikolons aufzuspüren? Installieren Sie einfach die Task grunt-contrib-jshint und installieren Sie sie in der Observer-Task, bevor Sie die Datei kompilieren. Grunt warnt Sie nun vor etwaigen Fehlern und stoppt die Ausführung weiterer Aufgaben.

jshint: {
    files: [
        'assets/js/filename.js',
        'assets/dynamic/paths/**/*.js'
    ],
    options: {
        expr: true,
        globals: {
            jQuery: true,
            console: true,
            module: true,
            document: true
        }
    }
}

Assets zusammenführen

Das ist für mich besonders nützlich bei der Entwicklung des Fluent-Frameworks. Fluent Framework ist eine Reihe von Klassen, die das Erstellen von Optionsseiten und Metaboxen umfassen. 🎜 🎜Um die Entwicklung einzelner Felder zu erleichtern, habe ich eine Dateistruktur wie diese: 🎜

assets/
├── js/
|   ├── filename.js
├── fields/
    ├── text/
    |   ├── js/
    |       ├── text.js
    ├── select/
        ├── js/
            ├── select.js

🎜Dadurch ist es sehr einfach, den Bereich zu finden, an dem ich arbeite, und nur das für diesen Bereich erforderliche JavaScript zu ändern. 🎜

从用户的角度来看，我只想提供一个 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 文档编写器
咕噜卷曲

Das obige ist der detaillierte Inhalt vonOptimierung der WordPress-Entwicklung mit Grunt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Entwickeln Sie mobilfreundliche Dropdown-MenüsNächster Artikel：Entwickeln Sie mobilfreundliche Dropdown-Menüs

In Verbindung stehende Artikel

Mehr sehen