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 Plugin uglify() 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:

My Advanced Gulp Workflow for WordPress Themes

4 Kommentare

    1. 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

Schreibe einen Kommentar zu Jochen Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.