WordPress Themes entwickeln mit Gulp: Ein kurzer Einstieg
Wer regelmäßig WordPress Themes entwickelt sollte auf alle Fälle einen Task Runner verwenden, um wiederkehrende Aufgaben zu automatisieren. Ich persönlich bevorzuge und verwende Gulp anstelle von Grunt, weil es einen einfachen und schlanken Aufbau ermöglicht.
Wozu kann Gulp verwendet werden?
Die Möglichkeiten sind durch die große Anzahl an verfügbaren Gulp Plugins praktisch unendlich. Ich verwende momentan beispielsweise diese Module:
- Automatisches Einfügen von Browser/Vendor Prefixes mit
autoprefixer
- Minifizierung von Javascript Dateien mit
gulp-uglify
- Automatisches Erstellen von Right-to-Left (RTL) Language Stylesheets mit
gulp-rtlcss
- Sortieren von CSS Eigenschaften für bessere Lesbarkeit mit
postcss-sorting
Gulp Installation
Für die Verwendung von Gulp benötigt man Node.js, dass unter node.js.org heruntergeladen werden kann. Du kannst Node.js wie ein normales Programm auf deinem PC installieren.
Nach der Installation von Node.js muss das Terminal bzw. die Kommandozeile geöffnet werden, um mit der Gulp Installation fortzufahren. Für Windows Nutzer kann ich außerdem Cmder für eine hübschere Konsole empfehlen.
Im Terminal kann nun folgender Befehl eingegeben werden, um Gulp mit dem Node Package Manager (NPM) zu installieren (Hinweis: ohne $ eingeben):
$ npm install gulp --global
Die globale Installation sorgt dafür dass der Befehl gulp
überall im Terminal aufgerufen werden kann.
Projekt für WordPress Theme anlegen
Anschließend kann in der Konsole mit dem Befehl cd
in das Verzeichnis des WordPress Themes gewechselt werden. Mit cd ..
kannst du in ein höheres Verzeichnis wechseln.
Beispiel:
$ cd wp-content/themes/theme-name/
Danach wird im Theme Verzeichnis mit npm init
ein neues Node Projekt angelegt. Alle Projektinformationen werden dabei in der Datei package.json
gespeichert.
$ npm init
Die abgefragten Daten sind nicht wichtig und können alle mit ENTER bestätigt werden.
Gulp Plugins installieren
Jetzt wird Gulp erneut lokal für das Projekt installiert. Zusätzlich können auch schon die gewünschten Gulp Plugins für das Projekt installiert werden.
$ npm install gulp --save-dev $ npm install gulp-rename --save-dev $ npm install gulp-uglify --save-dev
Als Beispiel verwende ich gulp-rename
und gulp-uglify
, mit denen wir gleich unseren ersten Task anlegen werden. Nach der Installation sollte im Theme Verzeichnis ein neuer Ordner /node_modules
erscheinen, welcher die installierten Module beinhaltet.
Gulpfile.js anlegen
Als letzter Schritt muss eine neue JavaScript Datei mit dem Namen gulpfile.js
erstellt werden. In die Datei kann folgender Code eingefügt werden, um einen voll funktionsfähigen ersten Task zu erstellen.
Mit diesem kurzen Task wird die Datei /js/navigation.js kopiert, minifiziert, in navigation.min.js umbenannt und im selben Ordner /js gespeichert. Bitte stelle für dieses Beispiel deshalb sicher, dass dein Theme auch eine /js/navigations.js Datei beinhaltet.
Schauen wir uns den Task etwas genauer an. In den ersten 6 Zeilen werden Gulp und die Plugins geladen. Der eigentliche Task ist wie folgt aufgebaut:
- Zeile 9: Mit
gulp.task
wird ein neuer Task mit dem Namen minifyjs erstellt - Zeile 10: Mit
gulp.src
werden die Quelldateien für den Task festgelegt - Zeile 11: Mit
.pipe
werden die Quelldateien durch ein Modul geschickt. Wir verwenden das Pluginuglify()
für die Minifikation des JavaScript Codes. - Zeile 12: Das zweite Modul
rename()
wird verwendet, um die Datei umzunennen - Zeile 13: Mit
gulp.dest
wird der Zielort zum Speichern der neuen Datei gesetzt
Ausführen des Gulp Tasks
In der Konsole kann schließlich der neu erstellte Task aufgerufen werden:
$ gulp minifyjs
Als Ergebnis sollte nach Ablauf des Tasks eine minifizierte navigation.min.js in deinem /js Ordner auftauchen.
Fazit
Dieses Tutorial ist bewusst so kurz wie möglich gehalten und als Schnelleinstieg in Gulp vorgesehen.
Für eine detaillierte Anleitung über WordPress und Gulp mit weiteren Anwendungsbeispielen empfehle ich diesen Artikel:
Hallo,
du hast ja schon einige Themes erstellt.
Benutzt du ein Frameword, oder immer ganz von Anfang?
lg
Jochen
Hallo Jochen,
Meine Themes basieren grundsätzlich auf Underscores, einem Starter Theme von Automattic. Es enthält nur die nötigsten Funktionen und überhaupt kein Styling. Download unter http://underscores.me/
Ich starte ein neues Theme aber auch oft, indem ich eins meiner vorhandenen Themes kopiere und auf dieser Basis dann alles für das neue Design ändere.
LG,
Thomas
Ich habe mein letztes Theme mit Beans gemacht: http://www.getbeans.io/
Ist auch sehr interessant, falls du es nicht kennst.
Jochen
Kenne ich vom Namen her, habe es aber noch nie ausprobiert. Ich werde es testen wenn ich Zeit dafür finde 🙂