Share
In diesem Lernprogramm werden wir einen Blick auf die Verwendung von Grunt werfen, um Ihren WordPress-Entwicklungsworkflow zu beschleunigen.
Grunt ist ein über NPM installierter JavaScript-Task-Runner, der auf Ihrem Server ausgeführt wird. Um die Informationen in diesem Lernprogramm verwenden zu können, benötigen Sie einen Befehlszeilenzugriff auf einen Server. Der Kürze halber verweise ich Sie auf dieses Tutorial, um Grunt zum Laufen zu bringen und betriebsbereit zu machen.
Grunt ist ein bewährter Task Runner, der auf vielen verschiedenen Plattformen auf vielen verschiedenen Plattformen eingesetzt wird. Hier wollen wir eine solide Grundlage für Ihre WordPress-Entwicklung definieren.
Grunts Community ist unglaublich stark, was zur Entwicklung eines riesigen Katalogs an Plugins geführt hat. Es ist leicht, sich zu verlieren und viel Zeit damit zu verbringen, nach der zu suchen und zu überprüfen, welche verwendet werden soll.
Was sind einige der häufigsten Aufgaben, die ein WordPress-Theme oder -Plugin ausführen oder bereitstellen muss??
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 scannt, alle Übersetzungszeichenfolgen findet und ein kompiliert .Topf Datei am angegebenen Ort. Diese .Topf Die Datei kann dann zum Konvertieren verwendet werden .po und .mo Dateien für andere Benutzer, um Ihr Theme / Plugin zu übersetzen.
Fügen Sie zur Konfiguration des Pakets Folgendes hinzu Gruntfile.js initConfig Optionen:
makepot: target: Optionen: include: ['Pfad / zu / einige / Datei.php'], Typ: 'WP-Plugin // oder' WP-Theme '
Rufen Sie dann die Grunt-Aufgabe auf (wie im Gruntfile.js Mappe):
grunzen Makepot
Ihr gesamter Ordner wird gescannt und alle Strings entsprechen einer Pot-Datei.
Alle Designs und Plugins verwenden regelmäßig JavaScript- und CSS-Dateien. Leider wird häufig der Bedarf an Entwicklungs- und Produktionsversionen der Dateien übersehen.
Ich stütze mich auf WordPress selbst und versuche sicherzustellen, dass ich Dateien vollständig kommentiert und minimiert habe:
Accentsconagua
Dateiname.jsDateiname.min.jsDateiname.cssDateiname.min.cssWarum? Ich möchte gerne wissen, was in diesen Dateien passiert, aber ich möchte auch wissen, dass meine Besucher optimierte Versionen der Dateien erhalten.
Wenn Sie dies ohne eine Art Task Runner tun möchten, müssen Sie die während der Entwicklung in WordPress registrierten Asset-URLs ändern, um die geänderte, nicht reduzierte Version anzuzeigen, eine bestimmte Form von JavaScript- und CSS-Kompressor verwenden, bevor Sie ein Update freigeben, und dann die registrierten URLs zurückschalten . Und das macht keinen Spaß.
Mit Grunt können Sie das Uglify-Paket verwenden, um JavaScript-Dateien im Handumdrehen zu minimieren und zu optimieren. Um das CSS weiter voranzutreiben, können Sie die Sass-Task verwenden, um Sass-Dateien auch im Handumdrehen in CSS zu kompilieren. Für das, was es wert ist, verwende ich Sass, weil dies WordPress unter der Haube verwendet, aber es gibt auch einen LESS-Compiler für Grunt.
uglify: dist: Optionen: Banner: '/ *! <%= pkg.name %> <%= pkg.version %> Dateiname.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Bericht:' gzip ', Dateien: ' assets / js / Dateiname.min.js ': [' assets / path / to / file.js '', 'assets / path / an / another / file.js ',' assets / dynamic / pfade / ** / *. js '], dev: Optionen: Banner:' / *! <%= pkg.name %> <%= pkg.version %> Dateiname.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', verschönern: wahr, komprimieren: falsch, fehlerhaft: falsch, Dateien: ' assets / js / Dateiname.js ': [' assets / path / to / file.js '', 'assets / path / zu / another / file.js ',' assets / dynamic / pfade / ** / *. js '] sass: dist: Optionen: Banner: '/ *! <%= pkg.name %> <%= pkg.version %> Dateiname.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Stil:' komprimiert ', Dateien: [erweitern: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: Optionen: Banner:' / *! <%= pkg.name %> <%= pkg.version %> Dateiname.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Stil:' erweitert ', Dateien: [erweitern: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '] Tipp: Bei Verwendung der Sass-Task hinzufügen .Sass-Cache zu deinem .Gitignore um zu verhindern, dass der Compiler-Cache Ihrem Repository hinzugefügt wird.
Wir haben zwei wichtige Bereiche behandelt, die Grunt bei der Entwicklung von WordPress unterstützen kann, aber gehen wir noch einen Schritt weiter und entdecken Sie die zusätzlichen Möglichkeiten bei der Verwendung eines Task Runners.
Wir stellen bereits Aufgaben für die Bearbeitung von Dateien bereit. Warum sollten wir sie nicht optimieren? Mit der oben genannten Aufgabe müssten wir laufen grunzen *** Installieren Sie bei jeder Änderung das Paket grunt-contrib-watch. Nach der Konfiguration wird Grunt angewiesen, diese Aufgaben jedes Mal auszuführen, wenn eine Dateiänderung erkannt wird.
grunzen beobachten
Presto! Sie müssen Grunt nicht mehr bei jeder Dateiänderung ausführen. Starten Sie einfach den Watcher und bearbeiten Sie Ihre Dateien.
Wäre es nicht schön, JSHint mit unseren JavaScript-Dateien auszuführen, um diese Fehler oder fehlende Semikolons zu finden? Installieren Sie einfach die Task grunt-contrib-jshint und die Watcher-Task, bevor die Dateien kompiliert werden. Jetzt warnt Sie Grunt vor Fehlern und beendet die Ausführung weiterer Aufgaben.
jshint: files: ['assets / js / filename.js', 'assets / dynamic / pfade / ** / *. js'], Optionen: expr: true, globals: jQuery: true, Konsole: true, Modul: wahr, Dokument: wahr
Dies war für mich besonders hilfreich bei der Entwicklung des Fluent Frameworks. Das Fluent Framework besteht aus einer Reihe von Klassen, die unter anderem Optionsseiten und Meta-Boxen erstellen.
Um das Entwickeln einzelner Felder zu erleichtern, habe ich eine Dateistruktur wie folgt:
Vermögenswerte / ├── js / | ├── Dateiname.js ├── Felder / ├── Text / | ├── js / | ├── text.js ├── select / ├── js / ├── select.js
Dies macht es sehr einfach, das Feld, an dem ich arbeite, zu finden und nur das für dieses Feld erforderliche JavaScript zu ändern.
Aus Anwendersicht möchte ich nur eine einzige JavaScript-Datei mit allen gebräuchlichen und feldbasierten JavaScript-Codes bereitstellen. Verwenden Sie dazu die Aufgabe "Grunt-Contrib-uglify".
uglify: dist: Optionen: Banner: '/ *! <%= pkg.name %> <%= pkg.version %> Dateiname.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Bericht:' gzip ', Dateien: ' assets / js / Dateiname.min.js ': [' assets / path / to / file.js '', 'assets / path / an / another / file.js ',' assets / dynamic / pfade / ** / *. js '], dev: Optionen: Banner:' / *! <%= pkg.name %> <%= pkg.version %> Dateiname.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', verschönern: wahr, komprimieren: falsch, fehlerhaft: falsch, Dateien: ' assets / js / Dateiname.js ': [' assets / path / to / file.js '', 'assets / path / zu / another / file.js ',' assets / dynamic / pfade / ** / *. js '] Mit dieser Konfiguration kombiniert JSHint alle JavaScript-Dateien in einer Entwicklungs- und Produktionsdatei.
WordPress.org erfordert ein Readme.txt Datei mit detaillierten Informationen zum Thema / Plugin, aber Versionskontrollsysteme wie GitHub und BitBucket bevorzugen Readme.md Dateien. Wir müssen diese Dateien nicht manuell duplizieren oder synchron halten. Lassen Sie uns Grunt das für uns tun lassen!
Installieren Sie die Aufgabe "Grunt-Contrib-Copy" und konfigurieren Sie sie wie folgt:
Kopie: dist: src: 'readme.txt', dest: 'README.md'
Eine weitere hilfreiche Grunt-Aufgabe ist das Grunt-cURL-Paket. In einem der Fluent Framework-Felder musste auf die API-Daten von Google Fonts zugegriffen werden. Das Laden von Google als Empfehlung empfiehlt bei jedem Laden der Seite eine HTTP-Anforderung. Wenn Sie den Inhalt der Datei manuell nach unten kopieren, besteht die Gefahr, dass Sie nicht mehr aktuell sind. Das Beste aus beiden Welten ist die Verwendung von Grunt Curl, um uns eine Anfrage zu sparen und Updates zu erhalten.
Um auf dem neuesten Stand zu bleiben, haben wir einfach die cURL-Task geladen, die URL zum Abrufen der Zeichendaten und den Speicherort der Antwort angegeben.
curl: 'google-fonts-source': src: 'https://www.googleapis.com/webfonts/v1/webfonts?key=*******', dest: 'assets / vendor / google -fonts-source.json '
Jedes Mal, wenn wir die Aufgabe ausführen, wird die neueste Schriftartenliste heruntergeladen und in der Framework-Datei gespeichert.
Diese Aufgabe eignet sich am besten für Themen, Plugins und Frameworks, in denen viele Entwicklungsaugen neugierig sein werden. Und Kontext ist nie eine schlechte Sache für diejenigen, die in der Codebase herumstochern.
PHP Documentor ist ein hervorragendes Werkzeug zum automatischen Generieren dieser Daten. Außerdem können Sie sich auf die Bereitstellung aussagekräftiger DocBlocks in Ihrem Code konzentrieren.
phpdocumentor: dist: Optionen: Ignoriere: 'Knotenmodule'
Tipp: Hinzufügen docs zu deinem .Gitignore wenn Sie die Dokumentation und alle ihre Cache-Dateien nicht festschreiben möchten.
Hier ist der package.json und das Gruntfile.js für die oben beschriebenen Aufgaben.
package.json
"name": "paketname", "version": "1.0.0", "description": "…", "main": "Dateiname.php", "scripts": "test": "echo \ "Fehler: Kein Test angegeben \" && Exit 1 "," Repository ": " Typ ":" git "," URL ":" http://repo-url.com "," Schlüsselwörter ": [ "wordpress"], "author": "Ihr Name", "Lizenz": "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')), Kopie: 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 '], Typ:' wp-plugin '// oder' wp -theme ', jshint: files: [' assets / js / filename.js ',' assets / dynamic / pfade / ** / *. js '], Optionen: expr: true, globals: jQuery : true, Konsole: true, Modul: true, document: true, phpdocumentor: dist: options: ignore: 'node_modules', sass: dist: options: banner: '/ *! <%= pkg.name %> <%= pkg.version %> Dateiname.min.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Stil:' komprimiert ', Dateien: [erweitern: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .min.css '], dev: Optionen: Banner:' / *! <%= pkg.name %> <%= pkg.version %> Dateiname.css <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Stil:' erweitert ', Dateien: [erweitern: true, cwd:' assets / scss ', src: [' * .scss '], dest:' assets / css ', ext:' .css '], uglify: dist: Optionen: Banner:' / *! <%= pkg.name %> <%= pkg.version %> Dateiname.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', Bericht:' gzip ', Dateien: ' assets / js / Dateiname.min.js ': [' assets / path / to / file.js '', 'assets / path / an / another / file.js ',' assets / dynamic / pfade / ** / *. js '], dev: Optionen: Banner:' / *! <%= pkg.name %> <%= pkg.version %> Dateiname.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> * / \ n ', verschönern: wahr, komprimieren: falsch, fehlerhaft: falsch, Dateien: ' assets / js / Dateiname.js ': [' assets / path / to / file.js '', 'assets / path / zu / another / file.js ',' assets / dynamic / pfade / ** / *. 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']); ; Tipp: Hinzufügen Knotenmodule und npm-debug.log zu deinem .Gitignore um zu verhindern, dass die Aufgaben als zugeordnete Dateien zu Ihrem Repository hinzugefügt werden.
Wie Sie anhand der obigen Aufgaben sehen können, kann Grunt dazu verwendet werden, die WordPress-Entwicklung zu automatisieren und Ihnen mehr Zeit zu geben, sich auf das Schreiben von Code zu konzentrieren, anstatt ihn zu verwalten.
Wir haben nur ein paar Aufgaben für WordPress detailliert beschrieben, aber es gibt viele andere Pakete für projektspezifische Anforderungen, wie zum Beispiel Bildoptimierungsaufgaben und vieles mehr!
Grunt ist mittlerweile ein etablierter Task-Runner, und die Dokumentation ist mit WordPress selbst vergleichbar. Warum sollten Sie nicht in Erwägung ziehen, eine Aufgabe zu erstellen, die noch nicht in Betracht gezogen wurde, und sie mit der Community zu teilen?
