Erste Schritte mit Gulp.js

Gulp ist ein auf Javascript basierendes Werkzeug, mit dem Sie Teile Ihres Arbeitsablaufs automatisieren können. Durch die Automatisierung können Sie Stunden am Tag buchstäblich einsparen. Egal, ob Sie Entwickler oder Designer sind und ab und zu HTML-Wireframes erstellen, ich möchte Sie dazu ermutigen.

In diesem Artikel werden die Grundlagen der Verwendung von Gulp erläutert - von der Installation über die grundlegende Syntax und einige Beispiele. Am Ende des Artikels sollten Sie dazu in der Lage sein Suchen, Installieren und Verwenden von Paketen, die andere für Gulp erstellt haben um SASS zu kompilieren, Bilder zu optimieren, Sprites zu erstellen, Dateien zu verketten und vieles mehr!

Gulp installieren

Keine Sorge, die Installation ist sehr einfach. Wir müssen das Terminal unter OSX und Linux oder die Eingabeaufforderung für Windows verwenden. Ich werde es von nun an als Terminal bezeichnen.

Öffnen Sie es, geben Sie npm -v ein und drücken Sie die Eingabetaste. Wenn die Versionsnummer angezeigt wird, ist Node bereits installiert. Dies ist eine Abhängigkeit von Gulp.

Wenn Sie eine bekommen “Befehl nicht gefunden” (oder einen ähnlichen Fehler), gehen Sie zur Node.js-Downloadseite und wählen Sie das für Ihr System geeignete Paket aus. Nach der Installation ist der Befehl npm im Terminal verfügbar.

Die Installation von Gulp ist genauso einfach. Fügen Sie den folgenden Befehl in das Terminal ein.

npm install --global gulp

Dadurch wird der Gulp-Befehl installiert, der global auf Ihrem System verfügbar ist.

Gulp zu einem Projekt hinzufügen

Gulp ist jetzt installiert, aber wir müssen es jedem Projekt, für das wir es benötigen, separat hinzufügen. Erstellen Sie jetzt einen leeren Ordner und navigieren Sie zu Ihrem Terminal. Verwenden Sie in dem Ordner für das Projekt den folgenden Befehl:

npm install --save-dev gulp

Dadurch sollten Sie einen node_modules-Ordner und eine npm-debug.log-Datei in Ihrem Projektordner erstellen. Diese werden von Gulp verwendet, um sich für Ihr Projekt einzusetzen, Sie müssen zu diesem Zeitpunkt nicht darüber nachdenken.

Der Grund, warum wir Gulp zu jedem spezifischen Projekt hinzufügen müssen, ist das Jedes Projekt hat andere Anforderungen. Man kann nach SASS verlangen, ein anderes nach Less. Der eine kann Coffeescript verwenden, der andere nicht und so weiter.

Das Gulpfile

Das Gulpfile ist der Ort, an dem die Magie stattfindet. Hier definieren Sie die Automatisierungen, die Sie benötigen und wenn du willst, dass sie passieren. Erstellen Sie eine leere Standardaufgabe, indem Sie eine Datei mit dem Namen erstellen gulpfile.js und fügen Sie den folgenden Code ein.

var gulp = required ('gulp'); gulp.task ('default', function () // Das macht im Moment nichts, wir werden bald Funktionalität hinzufügen);

Sobald diese Datei gespeichert ist, können Sie zu Ihrem Terminal zurückkehren und den gulp-Befehl selbst ausführen. Gulp erkennt, in welchem ​​Projekt es sich befindet, und führt die Standardaufgabe aus, die wir gerade erstellt haben. Sie sollten so etwas sehen:

Hier passiert wirklich nichts, da die Aufgabe leer ist, aber es funktioniert gut. Lassen Sie uns nun einige Beispiele anführen!

Eine Datei kopieren

Dies ist eine langweilige Sache, das gebe ich zu, aber es wird Ihnen helfen zu verstehen, was los ist.

Erstellen Sie in Ihrem Projektordner eine Datei mit dem Namen to_copy.txt , und einen Ordner mit dem Namen dev. Gehen wir in unsere Gulpfile und erstellen Sie eine neue Aufgabe mit dem Namen Kopieren.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Die erste Zeile definiert eine Aufgabe, die als Kopie bezeichnet wird. In diesem verwenden wir gulp.src, um anzugeben, auf welche Dateien wir mit dieser Aufgabe abzielen. In diesem Fall handelt es sich um eine einzelne Datei mit dem Namen to_copy.txt.

Wir leiten diese Dateien dann an die Funktion gulp.dest, die angibt, wo diese Dateien abgelegt werden sollen. Ich habe das Verzeichnis dev verwendet.

Gehen Sie zurück zu Ihrem Terminal und geben Sie ein Schluckkopie Um diese Aufgabe auszuführen, sollte sie die angegebene Datei in das angegebene Verzeichnis kopieren, etwa wie folgt:

Der Pipe-Befehl ist das Herzstück von Gulp. Dies ist eine effiziente Möglichkeit, Daten zwischen Befehlen zu verschieben. Der Befehl src gibt die Dateien an, die an den Befehl dest weitergeleitet werden. In komplexeren Szenarios würden wir unsere Dateien an andere Befehle weiterleiten, bevor Sie ein Ziel angeben.

Sie sollten auch wissen, dass die Quelle als einzelne Datei oder als mehrere Dateien angegeben werden kann. Wenn wir einen Ordner haben Produktion und wir möchten alle Dateien aus unserem Ordner verschieben Entwicklung Ordner hinein, könnten wir den folgenden Befehl verwenden:

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Das Sternzeichen stimmt mit dem gesamten Verzeichnis überein. Sie könnten auch alle Dateien in allen Unterverzeichnissen abgleichen und alle möglichen anderen Übereinstimmungen durchführen. In der Node-glob-Dokumentation finden Sie weitere Informationen.

SASS kompilieren

Das Erstellen eines Stylesheets aus SASS-Dateien ist eine häufige Aufgabe für Entwickler. Das geht mit Gulp ziemlich leicht, wir müssen uns jedoch etwas vorbereiten. Abgesehen von grundlegenden Befehlen wie src, dest und einer Reihe anderer Befehle wird die gesamte Funktionalität über Addons von Drittanbietern hinzugefügt. So gehe ich mit ihnen um.

Ich tippe SASS Gulp In Google ist das erste Ergebnis normalerweise das, was ich brauche. Sie sollten die Seite für das SASS-Paket finden. Es zeigt Ihnen, wie Sie es installieren (npm install gulp-sass). Möglicherweise müssen Sie sudo verwenden, um es als Administrator zu installieren. Dies ist wahrscheinlich der Fall (sudo npm install gulp-sass). .

Anschließend können Sie die vom Paket vorgegebene Syntax verwenden, um Ihren Code zu kompilieren. Erstellen Sie dazu eine Datei namens styles.scss mit folgendem Inhalt:

$ primary: # ff9900; body background: $ primary; 

Erstellen Sie nun die folgende Gulp-Aufgabe in der Gulpfile.

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

Vergessen Sie vor dem Ausführen des Befehls nicht, das Paket oben in der Gulpfile wie folgt zu "anfordern":

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

Wenn du rennst schluck sass, Alle Dateien mit der Erweiterung "scss" werden an die Sass-Funktion weitergeleitet, die sie in "css" konvertiert. Diese werden dann an die Zielfunktion weitergeleitet, die sie im Ordner css ablegt.

Dateien und Ordner ansehen

Bisher ist das alles praktisch, aber wir müssen noch einen Befehl eingeben jedes Mal Wir möchten eine Task ausführen, die nicht besonders effizient ist, insbesondere bei Stylesheet-Änderungen. Mit Gulp können Sie Dateien auf Änderungen überprüfen und Befehle automatisch ausführen.

Erstellen Sie in der Gulpfile einen Befehl mit dem Namen automatisieren Mit dem Befehl watch überwachen Sie einen Satz von Dateien auf Änderungen und führen einen bestimmten Befehl aus, wenn sich eine Datei ändert.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Wenn du schreibst Schluck automatisieren In das Terminal wird die Task gestartet und beendet, sie kehrt jedoch nicht zur Eingabeaufforderung zurück, da sie auf Änderungen überwacht. Wir haben festgelegt, dass wir alle SCSS-Dateien im Stammverzeichnis überwachen möchten. Wenn sich diese Dateien ändern, möchten wir den Befehl sass ausführen, den wir zuvor eingerichtet haben.

Wenn Sie jetzt Ihre style.scss-Datei ändern, sollte sie automatisch in die css-Datei im css-Verzeichnis kompiliert werden.

Mehrere Aufgaben ausführen

In vielen Situationen möchten Sie möglicherweise mehrere Aufgaben ausführen. Beim Betrachten Ihres Javascript-Ordners möchten Sie möglicherweise zwei Dateien verketten und dann weiter verkleinern. Es gibt zwei Möglichkeiten, dies zu erreichen.

Wenn Aufgaben zusammenhängen, mag ich das kette sie. Ein gutes Beispiel wäre die Verkettung und Minifizierung von Javascript-Dateien. Wir leiten zuerst unsere Dateien an die concat-Aktion, dann an gulp-uglify und verwenden sie dann die Zielfunktion, um sie auszugeben.

Wenn Aufgaben nicht miteinander zusammenhängen, können Sie dies tun mehrere Aufgaben aufrufen. Ein Beispiel wäre eine Aufgabe, bei der wir unsere Skripte verketten und minimieren sowie unsere SASS kompilieren möchten. Hier ist er voll und ganz, wie das aussehen würde.

var gulp = required ('gulp'); var uglify = required ('gulp-uglify'); var concat = erfordern ('gulp-concat'); var sass = erfordern ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Wenn du schreibst Schluck-Skripte In das Terminal werden alle Javascript-Dateien im Verzeichnis js verkettet, in das Hauptverzeichnis ausgegeben, anschließend in das Hauptverzeichnis kopiert und dort gespeichert.

Wenn du schreibst schluck sass, Alle Ihre Scss-Dateien werden kompiliert und im Verzeichnis css gespeichert.

Wenn du schreibst Schluck (die Standardaufgabe), Ihre Skripte Aufgabe wird ausgeführt, gefolgt von Ihrem Stile Aufgabe.

Das Schluck automatisieren task überwacht mehrere Ordner auf Änderungen in den Dateien "scss" und "js" und führt beide von uns definierten Aufgaben aus, wenn eine Änderung erkannt wird.

Überblick

Die Verwendung von Gulp ist nicht schwierig. Tatsächlich ziehen es viele Leute aufgrund der einfacheren Syntax dem Grunt vor. Beachten Sie die Schritte, die beim Erstellen einer neuen Automatisierung zu beachten sind:

• Plugin suchen
• PIugin installieren
• Benötigen Sie ein Plugin in Ihrer Gulpfile
• Verwenden Sie die Syntax in der Dokumentation

Die fünf in Gulp verfügbaren Befehle (task, run, watch, src, dest) sind die einzigen, die Sie kennen müssen. Alle Addons von Drittanbietern verfügen über eine hervorragende Dokumentation. Hier sind einige Dinge, die ich benutze, mit denen Sie gleich loslegen könnten:

• Bildoptimierung mit der Optimierung des Schluckbildes
• Erstellen von Image-Sprites mit Gulp-Sprite
• Verketten von Dateien mit gulp-concat
• Minimieren von Dateien mit gulp-uglify
• Löschen von Dateien mit gulp-del
• Javascript füttert mit gulp-jslint
• JSON-Flusen mit Schluck-Jsonlint
• Autoprefix-CSS mit gulp-autoprefixer
• Suchen und Ersetzen mit gulp-frep
• Reduzieren Sie CSS mit gulp-minify-css