In diesem Artikel erfahren Sie, wie Sie mit gulp verschiedene Aufgaben automatisieren können, die Sie normalerweise von Hand erledigen oder für die Sie auf von anderen entwickelte Tools angewiesen sind.

Was ist Schluck?

Gulp ist ein Streaming-Build-System. Sie haben vielleicht schon von Grunts gehört und es benutzt. Aber in letzter Zeit wird Schluck immer beliebter. Es kann erstaunliche Dinge tun, z. B. LESS / Sass kompilieren, JS-Dateien erstellen, Webseiten neu laden und vieles mehr.

Warum Gulp verwenden?

Durch die Automatisierung mehrerer Aufgaben können Sie viel Zeit sparen. Und das Beste ist, dass Sie die Macht haben, ihm zu sagen, was zu tun ist, im Gegensatz zu den Tools von Drittanbietern, um bestimmte Funktionen zu implementieren. Kurz gesagt, Sie können Ihr eigenes Automatisierungswerkzeug nach Ihren Bedürfnissen erstellen.

Voraussetzungen

Um zu beginnen, müssen Sie Node.js (v0.10.30 oder höher) installiert haben. Ich persönlich bevorzuge den Node Version Manager (NVM), damit ich auf meinem Entwicklungscomputer zwischen verschiedenen Versionen von Node.js wechseln kann.

Lass uns anfangen

Als Erstes müssen Sie gulp installieren. Verwenden Sie dazu den folgenden Befehl vom Terminal.

npm install -g gulp

Dadurch wird gulp global auf Ihrem Computer installiert.

Beginnen Sie mit der Einrichtung des Automatisierungs-Tools, indem Sie ein Verzeichnis im WordPress-Ordner "Themes" oder an einem beliebigen gewünschten Ort erstellen.

In meinem Fall navigiere ich zum Themenordner…

cd… / wp-content / themes

… Und führen Sie den folgenden Befehl aus.

mkdir wp-gulp-automation

Nun navigiere ich zu dem Ordner, um eine npm Projekt.

cd wp-gulp-automation npm init

Daraufhin werden mehrere Fragen gestellt, z. B. Projektname, Version, Beschreibung, Autor, Lizenz usw..

Sie können sie entweder ausfüllen oder weiter schlagen Eingeben bis es sagt Ja. Geben Sie zuletzt ein Ja und schlagen Eingeben ein Mal noch.

Dadurch wird eine package.json-Datei im Verzeichnis erstellt. Es enthält Informationen zu Ihrem Projekt und seinen Abhängigkeiten.

Wenn Sie den Vorgang korrekt durchgeführt haben, sieht Ihre package.json-Datei folgendermaßen aus:

"name": "wp-gulp-automation", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": " echo \ "Fehler: kein Test angegeben \" && exit 1 "," author ":" "," license ":" ISC "

Erste Gulp-Datei

Installieren Sie Gulp lokal in Ihrem Projekt.

npm install gulp --save-dev

Dadurch wird ein erstellt Knotenmodule Ordner und behalten Sie alle Ihre Projektabhängigkeiten dort. --save-dev wird zum Update verwendet dev-Abhängigkeiten in package.json.

Erstellen Sie im Projektverzeichnis gulpfile.js mit dem folgenden Code.

var gulp = required ('gulp'); gulp.task ('default', function () console.log ('default gulp task ...'));

Im Terminaltyp Schluck und schlagen Eingeben. Der obige Text wird an der Konsole protokolliert.

Erstellen eines grundlegenden Sass-Kompilierungswerkzeugs

Für die Sass-Kompilierung stehen verschiedene Schluck-Plugins zur Verfügung. Ich habe drei davon ausprobiert und unten aufgelistet.

1. Schlucksass (einfach und leicht zu bedienen)
2. Gulp-Kompass (funktioniert bestens mit Kompass-basierten Projekten)
3. Schluck-Rubin-Kompass (dieser gibt mehr Kontrolle als die beiden anderen)

Der Einfachheit halber verwende ich in diesem Tutorial den ersten, den Schluck-Sass.

Führen Sie den folgenden Befehl im Projektverzeichnis aus, um ihn zu installieren.

npm install gulp-sass --save-dev

Ermöglicht die Aktualisierung des Codes zum Kompilieren von Sass-Dateien in CSS-Dateien.

Fügen Sie an der Spitze von gulpfile an.

var sass = erfordern ('gulp-sass'); gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')); ); gulp.task ('default', ['sass']);

Jetzt wenn ich renne schluck sass Im Terminal wird die Sass-Task ausgelöst.

Und weil ich es zu einem Array von Standardaufgaben hinzugefügt habe, löst ich beim Ausführen von gulp in terminal die Standardaufgabe aus.

Dazu werden alle Dateien im kompiliert css / src Ordner des Projekts und speichern Sie sie im css Mappe. Möglicherweise möchten Sie zusätzliche Optionen an das System übergeben sass () Funktion abhängig von Ihren Bedürfnissen.

Also im Grunde läuft Schluck und schluck sass wird zu dieser Zeit dasselbe tun.

Fusseln und JS-Dateien kompilieren

Als Nächstes benötigen Sie gulp-jshint und gulp-concat, um einen besseren JavaScript-Code in Ihren Designs zu haben.

npm install gulp-jshint --save-dev npm install gulp-concat --save-dev

Fügen Sie an der Spitze von gulpfile den Befehl required hinzu:

var jshint = required ('gulp-jshint'); var concat = erfordern ('gulp-concat');

Fügen Sie der Datei den folgenden gulp-Task hinzu, und fassen Sie alle js-Dateien zusammen.

gulp.task ('js', function () gulp.src ('js / src / *. js') .pipe (jshint ()) .pipe (jshint.reporter ('fail')) .pipe (concat ( 'theme.js')) .pipe (gulp.dest ('js')););

Wenn Sie etwas mehr organisieren möchten, können Sie dies tun Verkäufer und Thema Ordner darin js / src. Das Verkäufer Der Ordner enthält alle Bibliotheken von Drittanbietern, z. B. jQuery-Plugins und die Thema Der Ordner enthält den JavaScript-Code Ihres eigenen Themas.

Wenn Sie sie auch minimieren möchten, können Sie die schluck-uglify Plugin. Und aktualisieren wir unsere Standardaufgabe folgendermaßen:

gulp.task ('default', ['sass', 'js']);

Bilder optimieren

Das am häufigsten verwendete Schluck-Plugin für diese Aufgabe ist Schluck-Imagemin. Installieren Sie es mit:

npm install gulp-imagemin --sav-dev

Fügen Sie erforderlich hinzu gulp-imagemin oben:

var imagemin = erfordern ('gulp-imagemin');

Fügen Sie der gulpfile die folgende Aufgabe hinzu.

gulp.task ('img', function () gulp.src ('img / src / *. png, jpg, gif') .pipe (imagemin (Optimierungslevel: 7, progressiv: wahr)) .pipe (gulp.dest ('img')));

Dazu wird eine optimierte Kopie aller in der CD platzierten Bilder erstellt img / src Verzeichnis in die img Verzeichnis.

Fügen Sie es der Standardaufgabenliste hinzu.

gulp.task ('default', ['sass', 'js', 'img']);

Aufgabe beobachten

Als Nächstes wird eine Uhr zur Automatisierung von Aufgaben eingerichtet.

gulp.task ('watch', function () gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js', [js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););

Wenn Sie es zur Liste der Standardaufgaben hinzufügen, erhalten Sie Folgendes:

gulp.task ('default', ['sass', 'js', 'img', 'watch']));

Fehlerbehandlung

Was passiert, wenn beim Ausführen einer unserer Aufgaben ein Fehler auftritt? Ihre Gulpfile wird nicht mehr ausgeführt.

Um dies zu bewältigen, verwenden wir ein schönes Schluck-Plugin namens Schluck-Klempner. Wir werden auch gulp-notify verwenden, um bei Fehlern schöne Benachrichtigungen über das Knurren anzuzeigen.

Installieren Schluck-Klempner und Schluck-Benachrichtigung mit:

npm install gulp-plumber --save-dev npm install gulp-notify --save-dev

Wieder benötigen Sie dies an der Spitze von Gulpfile.

var Klempner = Anfordern ('Schluck-Klempner'); var notify = erfordern ('gulp-notify');

Hier ist eine praktische Klempner-Einstellung, die ich verwenden werde, wenn bei einer der Aufgaben ein Fehler auftritt.

var plumberErrorHandler = errorHandler: notify.onError (title: 'Gulp', Nachricht: 'Error: <%= error.message %>');

Nun ist unser aktualisiert sass Aufgabe wird wie folgt aussehen:

gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (Klempner (Klempner)) .pipe (sass ()) .pipe (gulp.dest ( './css')));

Beachten Sie die plumberErrorHandler hinzugefügt. Genauso werde ich dies dem hinzufügen js und img Aufgaben.

Live Reload

Eine wichtige Sache ist die Live-Reload-Funktion.

Installieren Sie zunächst eine Browsererweiterung / ein Addon für Live-Reload:

• Chrome-Erweiterung
• Firefox-Addon

Nun müssen Sie gulp-livereload installieren mit:

npm install gulp-liveraload --save-dev

Fügen Sie es noch einmal an der Stelle hinzu, an der Sie es in gpfile benötigen.

var Leberlast = erfordern ('Schluck-Leberlast');

Lass uns unsere Aufgaben jetzt mit Live-Reload aktualisieren.

Das sass Aufgabe sieht so aus:

gulp.task ('sass', function () gulp.src ('./ css / src / *. scss') .pipe (Klempner (Klempner)) .pipe (sass ()) .pipe (gulp.dest ( './css')) .pipe (livereload ()););

Ähnlich hinzufügen Leberlast zum js und img Aufgaben. Eine weitere Sache, die Sie tun müssen, ist hinzuzufügen livereload.listen (); am Anfang der Überwachungsaufgabe.

gulp.task ('watch', function () livereload.listen (); gulp.watch ('css / src / *. scss', ['sass']); gulp.watch ('js / src / *. js ', [' js ']); gulp.watch (' img / src / *. png, jpg, gif ', [' img ']););

Um zu testen Leberlast, Lassen Sie uns eine index.php-Datei mit dem folgenden Code erstellen.

      
Hallo vom Schluck Automatisierungswerkzeug
   

Und ein style.css.

/ * Themenname: Tutsplus gulp wp automation Themen-URI: http://tutsplus.com Beschreibung: Automatisieren des Workflow für die WordPress-Entwicklung. Autor: Atinder Singh Urheber-URI: http://tutsplus.com Version: 1.4.1 Lizenz: GNU General Public License v2 oder höher Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Aktivieren Sie nun dieses Thema im WordPress-Dashboard. Sie haben Ihre grundlegende Umgebung eingerichtet und sind bereit zu rocken. Lauf Schluck im Terminal und zeigen Sie das aktivierte Design in Ihrem Browser an. Klicken Sie auf die Live-Reload-Erweiterung, damit der Live-Reload-Server eine Verbindung herstellt und die Änderungen überwachen.

Wann immer Sie den Inhalt einer Datei ändern css / src oder js / src, gulp überwacht und kompiliert die Dateien und lädt Ihren Browser neu.

Etwas fortgeschrittenes Zeug

Jetzt haben Sie ein Werkzeug, mit dem Sie mehrere Designs erstellen können. Verschieben Sie die Designdateien in einen anderen Ordner im Ordner wp-content / themes / wp-gulp-automation / theme-boilerplate Verzeichnis.

Kopiere das index.php und style.css Dateien und die css, img und js Ordner zu thematische boilerplate.

Dies ist eine sehr einfache Themen-Boilerplate. Sie können dies erweitern oder das gewünschte verwenden.

Für diese letzte Aufgabe benötigen Sie drei Node.js-Module. Installieren Sie json-file, node-fs und fs-extra.

npm install json-datei --save-dev npm install knoten-fs --save-dev npm install fs-extra --save-dev

Fordern Sie sie oben in Ihrem Gulpfile an.

var fs = required ('node-fs'); var fse = erfordern ('fs-extra'); var json = required ('json-file'); var themeName = json.read ('./ package.json'). get ('themeName'); var themeDir = '… /' + themeName;

Fügen Sie diese Aufgabe zu Ihrer Gulpfile hinzu.

gulp.task ('init', function () fs.mkdirSync (themeDir, 765, true); fse.copySync ('theme-boilerplate', themeDir + '/'););

Sie können jetzt ein neues Thema in erstellen WP-Inhalt / Themen Verwenden Sie den Boilerplate-Code wie folgt, indem Sie den themeName Attribut in package.json.

Und läuft:

Schluck init

Jetzt haben Sie zwei Ordner:

1. wp-gulp-automation (das Werkzeug für alle Ihre Themen)
2. myNewTheme (Ihr neu erstelltes Design)

Die Möglichkeiten dafür sind endlos.

Sie können CoffeeScript anstelle von gewöhnlichem JavaScript verwenden und gulp anweisen, auch darauf zu achten. Je nach Arbeitsablauf können Sie weitere Aufgaben hinzufügen. Einige neue Aufgabenideen könnten sein:

• Entfernen von .DS_Store, .thumb-Dateien oder unerwünschten Dateien automatisch
• Das Theme wird in einem ZIP-Ordner verpackt, der bei Themeforest eingereicht werden kann

Danke fürs Lesen! Wenn Sie etwas hinzufügen oder neue Aufgaben erstellt haben, die Sie mit den Lesern teilen können, sind Sie herzlich willkommen.

Ressourcen

• Gulp-Website
• Gulp GitHub Seite