Gulp für Einsteiger

Gulp ist ein Tool, das Ihnen bei verschiedenen Aufgaben in der Webentwicklung hilft. Es wird oft verwendet, um Frontend-Aufgaben zu erledigen wie:

• Hochfahren eines Webservers
• Automatisches Laden des Browsers, wenn eine Datei gespeichert wird
• Verwendung von Präprozessoren wie Sass oder LESS
• Optimierung von Assets wie CSS, JavaScript und Bildern

Wichtiger Hinweis! Dieser Artikel wurde für Gulp 3.x geschrieben, aber jetzt ist Gulp 4.x erschienen und wird empfohlen. Wie bei jedem größeren Versionswechsel gibt es auch bei den APIs Änderungen. Wenn Sie Gulp 4 installieren und versuchen, einige der in diesem Artikel beschriebenen Dinge zu tun, werden sie nicht funktionieren. Wir werden hier einige Notizen einstreuen, um Sie daran zu erinnern. Das sieht nach einem ziemlich guten Gulp 4-Starter aus.

Dies ist keine umfassende Liste von Dingen, die Gulp tun kann. Wenn Sie verrückt genug sind, können Sie sogar einen statischen Website-Generator mit Gulp erstellen (ich habe es getan!). Also ja, Gulp ist extrem mächtig, aber Sie müssen lernen, wie man Gulp benutzt, wenn Sie Ihre eigenen angepassten Build-Prozesse erstellen wollen.

Dafür ist also dieser Artikel da. Er hilft Ihnen, die Grundlagen von Gulp so gut zu beherrschen, dass Sie alles andere selbst erforschen können.

Bevor wir in die Arbeit mit Gulp eintauchen, lassen Sie uns darüber sprechen, warum Sie Gulp im Gegensatz zu anderen ähnlichen Tools verwenden möchten.

Warum Gulp?

Werkzeuge wie Gulp werden oft als „Build-Tools“ bezeichnet, weil es sich um Werkzeuge handelt, mit denen die Aufgaben zur Erstellung einer Website ausgeführt werden. Die beiden populärsten Build-Tools, die es derzeit gibt, sind Gulp und Grunt. (Chris hat einen Beitrag über die ersten Schritte mit Grunt hier). Aber es gibt natürlich noch andere. Broccoli konzentriert sich auf die Kompilierung von Assets, eine der häufigsten Aufgaben von Build-Tools.

Es gibt bereits mehrere Artikel über die Unterschiede zwischen Grunt und Gulp und warum man das eine dem anderen vorziehen sollte. Sie können sich diesen Artikel, diesen oder diesen ansehen, wenn Sie mehr darüber erfahren möchten. Brunch ist in seinem Fokus auf Assets ähnlich und bündelt einige der häufigsten anderen Aufgaben wie einen Server und einen Datei-Überwacher.

Der Hauptunterschied besteht darin, wie Sie einen Workflow mit ihnen konfigurieren. Gulp-Konfigurationen sind im Vergleich zu Grunt tendenziell viel kürzer und einfacher. Gulp neigt auch dazu, schneller zu laufen.

Lassen Sie uns nun fortfahren und herausfinden, wie man einen Workflow mit Gulp einrichtet.

Was wir einrichten

Am Ende dieses Artikels werden Sie einen Workflow haben, der die Aufgaben erledigt, die wir am Anfang dieses Artikels beschrieben haben:

• Einrichten eines Webservers
• Kompilieren von Sass zu CSS
• Automatisches Aktualisieren des Browsers, wenn Sie eine Datei speichern
• Optimieren aller Assets (CSS, JS, Schriften und Bilder) für die Produktion

Sie werden auch lernen, wie Sie verschiedene Aufgaben in einfachen Befehlen verketten können, die leicht zu verstehen und auszuführen sind.

Lassen Sie uns damit beginnen, Gulp auf Ihrem Computer zu installieren.

Gulp installieren

Sie müssen Node.js (Node) auf Ihrem Computer installiert haben, bevor Sie Gulp installieren können.

Wenn Sie Node noch nicht installiert haben, können Sie es bekommen, indem Sie das Installationsprogramm von der Website von Node herunterladen.

Wenn Sie mit der Installation von Node fertig sind, können Sie Gulp installieren, indem Sie den folgenden Befehl in der Befehlszeile verwenden:

$ sudo npm install gulp -g

Hinweis: Nur Mac-Benutzer benötigen das Schlüsselwort sudo. (Siehe den ersten Kommentar von Pawel Grzybek, wenn Sie sudo nicht verwenden wollen). Und denken Sie daran, dass das „$“ im obigen Code nur die Eingabeaufforderung symbolisiert. Es ist nicht wirklich Teil des Befehls, den Sie ausführen.

Der npm install Befehl, den wir hier verwendet haben, ist ein Befehl, der den Node Package Manager (npm) verwendet, um Gulp auf Ihrem Computer zu installieren.

Das -g-Flag in diesem Befehl weist npm an, Gulp global auf deinem Computer zu installieren, wodurch du den gulp-Befehl überall auf deinem System verwenden kannst.

Mac-Benutzer benötigen das zusätzliche sudo-Schlüsselwort in dem Befehl, da sie Administratorrechte benötigen, um Gulp global zu installieren.

Nun, da Sie Gulp installiert haben, lassen Sie uns ein Projekt erstellen, das Gulp verwendet.

Erstellen eines Gulp-Projekts

Zunächst erstellen wir einen Ordner mit dem Namen project, der im weiteren Verlauf dieses Tutorials als Stammverzeichnis für unser Projekt dient. Führen Sie den npm init-Befehl in diesem Verzeichnis aus:

# ... from within our project folder$ npm init

Der npm init-Befehl erstellt eine package.json-Datei für Ihr Projekt, in der Informationen über das Projekt gespeichert werden, wie z. B. die im Projekt verwendeten Abhängigkeiten (Gulp ist ein Beispiel für eine Abhängigkeit).

npm init Sie werden aufgefordert:

Wenn die package.json-Datei erstellt ist, können wir Gulp mit dem folgenden Befehl in das Projekt installieren:

$ npm install gulp --save-dev

Diesmal installieren wir Gulp in project anstatt es global zu installieren, weshalb es einige Unterschiede im Befehl gibt.

Sie sehen, dass das Schlüsselwort sudo nicht erforderlich ist, da wir Gulp nicht global installieren, also ist -g auch nicht notwendig. Wir haben --save-dev hinzugefügt, das den Computer anweist, gulp als Dev-Abhängigkeit in package.json hinzuzufügen.

Wenn Sie den Projektordner überprüfen, nachdem der Befehl ausgeführt wurde, sollten Sie sehen, dass Gulp einen node_modulesOrdner erstellt hat. Sie sollten auch einen Ordner gulp innerhalb von node_modules sehen.

Wir sind fast bereit, mit Gulp zu arbeiten. Bevor wir das tun, müssen wir uns darüber im Klaren sein, wie wir Gulp für das Projekt verwenden werden, und ein Teil davon ist, sich für eine Verzeichnisstruktur zu entscheiden.

Festlegen der Ordnerstruktur

Gulp ist flexibel genug, um mit jeder Ordnerstruktur zu arbeiten. Sie müssen nur das Innenleben verstehen, bevor Sie es für Ihr Projekt optimieren können.

Für diesen Artikel werden wir die Struktur einer allgemeinen Webapp verwenden:

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

In dieser Struktur wird der Ordner app für Entwicklungszwecke verwendet, während der Ordner dist (wie in „Distribution“) optimierte Dateien für die Produktionsseite enthält.

Da app für Entwicklungszwecke verwendet wird, wird unser gesamter Code in app abgelegt.

Wir werden diese Ordnerstruktur im Hinterkopf behalten müssen, wenn wir an unseren Gulp-Konfigurationen arbeiten. Beginnen wir nun mit der Erstellung der ersten Gulp-Aufgabe in gulpfile.js, in der alle Gulp-Konfigurationen gespeichert werden.

Schreiben des ersten Gulp-Tasks

Der erste Schritt zur Verwendung von Gulp ist das require Eintragen in die Gulpfile.

var gulp = require('gulp');

Die require-Anweisung sagt Node, dass es im Ordner node_modules nach einem Paket namens gulp suchen soll. Sobald das Paket gefunden ist, weisen wir seinen Inhalt der Variablen gulp zu.

Wir können nun damit beginnen, eine Gulp-Aufgabe mit dieser gulp-Variable zu schreiben. Die grundlegende Syntax eines Gulp-Tasks lautet:

gulp.task('task-name', function() { // Stuff here});

task-name bezieht sich auf den Namen des Tasks, der immer dann verwendet wird, wenn man einen Task in Gulp ausführen möchte. Sie können die gleiche Aufgabe auch in der Befehlszeile ausführen, indem Sie gulp task-name schreiben.

Zum Testen erstellen wir eine hello Aufgabe mit dem Namen Hello Zell!.

gulp.task('hello', function() { console.log('Hello Zell');});

Wir können diese Aufgabe mit gulp hello in der Befehlszeile ausführen.

$ gulp hello

Die Befehlszeile liefert ein Protokoll mit dem Inhalt Hello Zell!.

Gulp-Aufgaben sind in der Regel etwas komplexer als diese. Sie enthalten in der Regel zwei zusätzliche Gulp-Methoden sowie eine Vielzahl von Gulp-Plugins.

So könnte eine echte Aufgabe aussehen:

Wie Sie sehen können, enthält ein echter Task zwei zusätzliche Gulp-Methoden – gulp.src und gulp.dest.

gulp.src teilt der Gulp-Aufgabe mit, welche Dateien für die Aufgabe verwendet werden sollen, während gulp.dest Gulp mitteilt, wo die Dateien ausgegeben werden sollen, sobald die Aufgabe abgeschlossen ist.

Lassen Sie uns versuchen, eine echte Aufgabe zu erstellen, bei der wir Sass-Dateien in CSS-Dateien kompilieren.

Preprocessing mit Gulp

Wir können Sass zu CSS in Gulp mit Hilfe eines Plugins namens gulp-sass kompilieren. Sie können gulp-sass in Ihr Projekt installieren, indem Sie den Befehl npm install verwenden, wie wir es für gulp getan haben.

Wir möchten auch das --save-dev-Flag verwenden, um sicherzustellen, dass gulp-sass zu devDependencies in package.json hinzugefügt wird.

$ npm install gulp-sass --save-dev

Wir müssen require gulp-sass aus dem Ordner node_modules entfernen, genau wie wir es mit gulp gemacht haben, bevor wir das Plugin verwenden können.

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Wir können gulp-sass verwenden, indem wir aGulpPlugin() durch sass() ersetzen. Da die Aufgabe dazu gedacht ist, Sass in CSS zu kompilieren, nennen wir sie sass.

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Wir müssen der Aufgabe sass Quelldateien und ein Ziel zur Verfügung stellen, damit die Aufgabe funktioniert, also erstellen wir eine Datei styles.scss im Ordner app/scss. Diese Datei wird der Aufgabe sass in gulp.src hinzugefügt.

Wir wollen die eventuelle styles.css-Datei in den Ordner „app/css“ ausgeben, der der destination für gulp.dest wäre.

Wir wollen testen, ob die Aufgabe sass so funktioniert, wie wir es wollen. Dazu können wir eine Sass-Funktion innerhalb von styles.scss hinzufügen.

// styles.scss.testing { width: percentage(5/7);}

Wenn Sie gulp sass in der Befehlszeile ausführen, sollten Sie jetzt sehen können, dass eine styles.css-Datei in app/css erstellt wurde. Darüber hinaus enthält sie den Code, bei dem percentage(5/7) in 71.42857% ausgewertet wurde.

/* styles.css */.testing { width: 71.42857%; }

So wissen wir, dass die Aufgabe sass funktioniert!

Manchmal brauchen wir die Möglichkeit, mehr als eine .scss-Datei gleichzeitig in CSS zu kompilieren. Wir können dies mit Hilfe von Node Globs tun.

Globbing in Node

Globs sind übereinstimmende Muster für Dateien, die es dir erlauben, mehr als eine Datei in gulp.src hinzuzufügen. Es ist wie reguläre Ausdrücke, aber speziell für Dateipfade.

Wenn Sie einen Glob verwenden, überprüft der Computer Dateinamen und Pfade auf das angegebene Muster. Wenn das Muster existiert, wird eine Datei gefunden.

Die meisten Arbeitsabläufe mit Gulp benötigen in der Regel nur 4 verschiedene Globbing-Muster:

1. *.scss: Das Muster * ist ein Platzhalter, der auf jedes Muster im aktuellen Verzeichnis passt. In diesem Fall passen alle Dateien mit der Endung .scss im Stammverzeichnis (project).
2. **/*.scss: Dies ist eine extremere Version des Musters *, die auf alle Dateien mit der Endung .scss im Stammverzeichnis und allen Unterverzeichnissen passt.
3. !not-me.scss: Das ! zeigt an, dass Gulp das Muster von seinen Übereinstimmungen ausschließen sollte, was nützlich ist, wenn Sie eine Datei von einem übereinstimmenden Muster ausschließen müssen. In diesem Fall würde not-me.scss von der Übereinstimmung ausgeschlossen werden.
4. *.+(scss|sass): Das Plus + und die Klammern () ermöglichen es Gulp, mehrere Muster abzugleichen, wobei verschiedene Muster durch das Pipe-Zeichen | getrennt werden. In diesem Fall passt Gulp auf jede Datei, die mit .scss oder .sass im Stammordner endet.

Jede andere Sass-Datei, die innerhalb von app/scss gefunden wird, würde mit dieser Änderung automatisch in die sass-Aufgabe aufgenommen werden. Wenn Sie eine print.scss-Datei in das Projekt einfügen, werden Sie sehen, dass print.css in app/css generiert wird.

Wir haben es jetzt geschafft, alle Sass-Dateien mit einem einzigen Befehl in CSS-Dateien zu kompilieren. Die Frage ist, wozu das gut ist, wenn wir jedes Mal, wenn wir Sass in CSS kompilieren wollen, gulp sass manuell ausführen müssen.

Glücklicherweise können wir Gulp anweisen, die Aufgabe sass automatisch auszuführen, wenn eine Datei durch einen Prozess namens „watching“ gespeichert wird.

Überwachen von Sass-Dateien auf Änderungen

Hinweis! Gulp Watch war eines der Dinge, die sich von 3.x zu 4.x stark verändert haben. Siehe die Dokumentation.

Gulp bietet uns eine watchMethode, die überprüft, ob eine Datei gespeichert wurde. Die Syntax für die watch-Methode lautet:

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', ); 

Häufiger werden wir jedoch mehr als einen Dateityp auf einmal überwachen wollen. Zu diesem Zweck können wir mehrere Überwachungsprozesse in einer watch-Aufgabe zusammenfassen:

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Wenn Sie jetzt den Befehl gulp watch ausführen, werden Sie sehen, dass Gulp sofort mit der Überwachung beginnt.

Und dass es automatisch die sass Aufgabe ausführt, wenn Sie eine .scss Datei speichern.

Lassen Sie uns einen Schritt weiter gehen und Gulp dazu bringen, den Browser neu zu laden, wann immer wir eine .scss-Datei mit Hilfe von Browser Sync speichern.

Live-Reloading mit Browser Sync

Browser Sync hilft dabei, die Webentwicklung zu vereinfachen, indem es einen Webserver aufbaut, der uns hilft, Live-Reloading einfach durchzuführen. Es hat auch andere Funktionen, wie das Synchronisieren von Aktionen über mehrere Geräte hinweg.

Zuerst müssen wir Browser Sync installieren:

$ npm install browser-sync --save-dev

Sie haben vielleicht bemerkt, dass bei der Installation von Browser Sync kein gulp--Präfix vorhanden ist. Das liegt daran, dass Browser Sync mit Gulp arbeitet, so dass wir kein Plugin verwenden müssen.

Um Browser Sync zu verwenden, müssen wir require Browser Sync.

var browserSync = require('browser-sync').create();

Wir müssen eine browserSync Aufgabe erstellen, um Gulp zu ermöglichen, einen Server mit Browser Sync aufzusetzen. Da wir einen Server betreiben, müssen wir Browser Sync mitteilen, wo das Stammverzeichnis des Servers sein soll. In unserem Fall ist es der `app`-Ordner:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

Wir müssen auch unsere sass-Aufgabe leicht ändern, damit Browser Sync neue CSS-Stile in den Browser injizieren kann (das CSS aktualisieren), wenn die sass-Aufgabe ausgeführt wird.

Wir sind mit der Konfiguration von Browser Sync fertig. Jetzt müssen wir die Aufgaben watch und browserSync gleichzeitig ausführen, damit das Live-Reloading stattfinden kann.

Es wäre umständlich, zwei Befehlszeilenfenster zu öffnen und gulp browserSync und gulp watch getrennt auszuführen, also bringen wir Gulp dazu, sie zusammen auszuführen, indem wir der Aufgabe watch mitteilen, dass browserSync abgeschlossen sein muss, bevor watch ausgeführt werden darf.

Wir können dies tun, indem wir ein zweites Argument zur watch Aufgabe hinzufügen. Die Syntax lautet:

gulp.task('watch', , function (){ // ...})

Und in diesem Fall fügen wir die Aufgabe browserSync hinzu.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Wir wollen auch sicherstellen, dass sass vor watch ausgeführt wird, damit das CSS bereits auf dem neuesten Stand ist, wenn wir einen Gulp-Befehl ausführen.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Wenn Sie nun gulp watch in der Befehlszeile ausführen, sollte Gulp sowohl die Aufgaben sass als auch browserSync gleichzeitig starten. Wenn beide Aufgaben abgeschlossen sind, wird watch ausgeführt.

Zur gleichen Zeit würde sich auch ein Browserfenster öffnen, das auf app/index.html verweist. Wenn Sie die Datei styles.scss ändern, werden Sie sehen, dass der Browser automatisch neu geladen wird.

Eine Sache gibt es noch, bevor wir diesen Abschnitt über das Live-Reloading beenden. Da wir bereits darauf achten, dass .scss-Dateien neu geladen werden, warum gehen wir nicht einen Schritt weiter und laden den Browser neu, wenn eine HTML- oder JavaScript-Datei gespeichert wird?

Wir können dies tun, indem wir zwei weitere Überwachungsprozesse hinzufügen und die browserSync.reload-Funktion aufrufen, wenn eine Datei gespeichert wird:

Bislang haben wir uns in diesem Tutorial um drei Dinge gekümmert:

1. Einrichten eines Webservers für die Entwicklung
2. Verwenden des Sass-Präprozessors
3. Reloaden des Browsers, wenn eine Datei gespeichert wird

Lassen Sie uns den Teil über die Optimierung von Assets im nächsten Abschnitt behandeln. Wir beginnen mit der Optimierung von CSS- und JavaScript-Dateien.

Optimierung von CSS- und JavaScript-Dateien

Entwickler müssen zwei Aufgaben erfüllen, wenn sie versuchen, CSS- und JavaScript-Dateien für die Produktion zu optimieren: Minifizierung und Verkettung.

Ein Problem, mit dem Entwickler bei der Automatisierung dieses Prozesses konfrontiert werden, ist, dass es schwierig ist, die Skripte in der richtigen Reihenfolge zu verketten.

Angenommen, wir haben 3 Skript-Tags in index.html eingefügt.

Diese Skripte befinden sich in zwei verschiedenen Verzeichnissen. Es wird schwierig sein, sie mit herkömmlichen Plugins wie gulp-concatenate zu verketten.

Glücklicherweise gibt es ein nützliches Gulp-Plugin, gulp-useref, das dieses Problem löst.

Gulp-useref verkettet eine beliebige Anzahl von CSS- und JavaScript-Dateien zu einer einzigen Datei, indem es nach einem Kommentar sucht, der mit „<!-build:“ beginnt und mit „<!-endbuild->“ endet. Die Syntax lautet:

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> kann entweder js, css, oder remove sein. Es ist am besten, type auf den Typ der Datei zu setzen, die Sie zu verketten versuchen. Wenn Sie type auf remove setzen, wird Gulp den gesamten Baublock entfernen, ohne eine Datei zu erzeugen.

<path> bezieht sich hier auf den Zielpfad der erzeugten Datei.

Wir möchten, dass die endgültige JavaScript-Datei im Ordner js als main.min.js erzeugt wird. Das Markup würde also lauten:

Nun konfigurieren wir das gulp-useref-Plugin in der gulpfile. Wir müssen das Plugin installieren und es in der gulpfile benötigen.

$ npm install gulp-useref --save-dev

var useref = require('gulp-useref');

Das Einrichten der useref Aufgabe ist ähnlich wie die anderen Aufgaben, die wir bisher gemacht haben. Hier ist der Code:

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Wenn Sie nun diese useref Aufgabe ausführen, wird Gulp die 3 Skript-Tags durchlaufen und sie zu dist/js/main.min.js verketten.

Die Datei ist jedoch im Moment noch nicht minifiziert. Wir müssen das gulp-uglify-Plugin verwenden, um beim Minifizieren von JavaScript-Dateien zu helfen. Wir brauchen auch ein zweites Plugin namens gulp-if, um sicherzustellen, dass wir nur versuchen, JavaScript-Dateien zu minifizieren.

$ npm install gulp-uglify --save-dev 

Gulp sollte nun automatisch die Datei `main.min.js` minifizieren, wenn Sie die useref Aufgabe ausführen.

Eine nette Sache, die ich mit Gulp-useref noch zu enthüllen habe, ist, dass es automatisch alle Skripte innerhalb von „<!-build:“ und „<!-endbuild->“ in eine einzige JavaScript-Datei ändert, die auf `js/main.min.js` zeigt.

Wunderbar, nicht wahr?

Die gleiche Methode können wir auch für die Verkettung von CSS-Dateien verwenden (falls Sie sich entschieden haben, mehr als eine hinzuzufügen). Wir folgen demselben Prozess und fügen einen build Kommentar hinzu.

Wir können die verkettete CSS-Datei auch minifizieren. Wir müssen ein Paket namens gulp-cssnano plugin verwenden, um uns bei der Minifizierung zu helfen.

$ npm install gulp-cssnano

Jetzt würden Sie eine optimierte CSS-Datei und eine optimierte JavaScript-Datei erhalten, wenn Sie die useref Aufgabe ausführen.

Lassen Sie uns als Nächstes die Bilder optimieren.

Optimieren von Bildern

Sie haben es wahrscheinlich schon erraten; wir müssen gulp-imagemin verwenden, um uns bei der Optimierung von Bildern zu helfen.

$ npm install gulp-imagemin --save-dev

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

Wir können png, jpg, gif und sogar svg mit Hilfe von gulp-imagemin minifizieren. Lassen Sie uns eine images Aufgabe für diesen Optimierungsprozess erstellen.

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Da verschiedene Dateitypen unterschiedlich optimiert werden können, möchten Sie vielleicht Optionen zu imagemin hinzufügen, um anzupassen, wie jede Datei optimiert wird.

Sie können zum Beispiel GIFs mit Zeilensprungverfahren erstellen, indem Sie den Optionsschlüssel interlaced auf true setzen.

Wenn Sie möchten, können Sie auch mit anderen Optionen herumspielen.

Das Optimieren von Bildern ist jedoch ein extrem langsamer Prozess, den man nur bei Bedarf wiederholen möchte. Hierfür können wir das gulp-cache Plugin verwenden.

$ npm install gulp-cache --save-dev

Wir sind fast fertig mit der Optimierung. Es gibt noch einen Ordner, den wir aus dem Verzeichnis `app` in das Verzeichnis `dist`, das Verzeichnis für die Schriftarten, verschieben müssen. Lassen Sie uns das jetzt tun.

Kopieren von Schriftarten nach Dist

Da die Schriftartendateien bereits optimiert sind, müssen wir nichts weiter tun. Alles, was wir tun müssen, ist, die Schriften nach dist zu kopieren.

Wir können Dateien mit Gulp kopieren, indem wir einfach gulp.src und gulp.dest ohne irgendwelche Plugins angeben.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Jetzt kopiert Gulp `Schriften` von `app` nach `dist`, wann immer Sie gulp fonts ausführen.

Wir haben jetzt 6 verschiedene Aufgaben in der Gulpfile, und jede von ihnen muss einzeln über die Kommandozeile aufgerufen werden, was etwas umständlich ist, also wollen wir alles in einem Befehl zusammenfassen.

Aber bevor wir das tun, schauen wir uns an, wie man die generierten Dateien automatisch bereinigt.

Automatisch erzeugte Dateien bereinigen

Da wir die Dateien automatisch erzeugen, wollen wir sicherstellen, dass Dateien, die nicht mehr verwendet werden, nicht irgendwo bleiben, ohne dass wir davon wissen.

Diesen Vorgang nennt man Bereinigung (oder einfacher ausgedrückt: Löschen von Dateien).

Wir müssen del benutzen, um uns beim Aufräumen zu helfen.

npm install del --save-dev

var del = require('del');

Die Funktion del nimmt ein Array von Node Globs auf, das ihr sagt, welche Ordner zu löschen sind.

Das Einrichten mit einer Gulp-Aufgabe ist fast wie das erste „Hallo“-Beispiel, das wir hatten.

gulp.task('clean:dist', function() { return del.sync('dist');})

Jetzt löscht Gulp den Ordner `dist` für Sie, wenn gulp clean:dist ausgeführt wird.

Anmerkung: Wir müssen uns nicht um das Löschen des dist/images-Ordners kümmern, da gulp-cache die Caches der Bilder bereits auf dem lokalen System gespeichert hat.

Um die Caches von Ihrem lokalen System zu löschen, können Sie einen separaten Task mit dem Namen `cache:clear`

gulp.task(‚cache:clear‘, function (callback) {
return cache.clearAll(callback)
})

Puh, das ist ein Mund voll. Lass uns jetzt alle unsere Aufgaben zusammenfassen!

Kombinieren von Gulp-Aufgaben

Fassen wir zusammen, was wir getan haben. Bis jetzt haben wir zwei verschiedene Sätze von Gulp-Aufgaben erstellt.

Das erste Set ist für einen Entwicklungsprozess, bei dem wir Sass zu CSS kompilieren, auf Änderungen achten und den Browser entsprechend neu laden.

Das zweite Set ist für einen Optimierungsprozess, bei dem wir alle Dateien für die Produktionswebsite vorbereiten. In diesem Prozess haben wir Assets wie CSS, JavaScript und Bilder optimiert und Schriftarten von app nach dist kopiert.

Die erste Gruppe von Aufgaben haben wir bereits mit dem Befehl gulp watch zu einem einfachen Workflow zusammengefasst:

gulp.task('watch', , function (){ // ... watchers})

Die zweite Gruppe besteht aus Aufgaben, die wir ausführen müssen, um die Produktionswebsite zu erstellen. Dazu gehören clean:dist, sass, useref, images und fonts.

Wenn wir denselben Gedankengang verfolgen würden, könnten wir eine build-Aufgabe erstellen, um alles miteinander zu kombinieren.

gulp.task('build', , function (){ console.log('Building files');})

Leider könnten wir die Aufgabe build nicht auf diese Weise schreiben, da Gulp alle Aufgaben im zweiten Argument gleichzeitig aktiviert.

Es besteht die Möglichkeit, dass useref, images oder sogar fonts vor clean abgeschlossen wird, was bedeutet, dass der gesamte Ordner `dist` gelöscht wird.

Um also sicherzustellen, dass die Bereinigungen vor den restlichen Aufgaben abgeschlossen werden, müssen wir ein zusätzliches Plugin namens Run Sequence verwenden.

$ npm install run-sequence --save-dev

Hier ist die Syntax einer Aufgabensequenz mit Run Sequence:

Wenn task-name aufgerufen wird, wird Gulp zuerst task-one ausführen. Wenn task-one beendet ist, wird Gulp automatisch task-two starten. Wenn task-two abgeschlossen ist, führt Gulp schließlich task-three aus.

Die Run Sequence erlaubt es Ihnen auch, Aufgaben gleichzeitig auszuführen, wenn Sie sie in einem Array platzieren:

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

In diesem Fall führt Gulp zuerst task-one aus. Wenn task-one abgeschlossen ist, führt Gulp jede Aufgabe im zweiten Argument gleichzeitig aus. Alle Aufgaben in diesem zweiten Argument müssen abgeschlossen sein, bevor task-three ausgeführt wird.

So können wir nun eine Aufgabe erstellen, die sicherstellt, dass clean:dist zuerst ausgeführt wird, gefolgt von allen anderen Aufgaben:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Um die Dinge konsistent zu machen, können wir die gleiche Sequenz auch mit der ersten Gruppe erstellen. Diesmal verwenden wir default als Aufgabenname:

gulp.task('default', function (callback) { runSequence(, callback )})

Warum default? Weil eine Aufgabe mit dem Namen default einfach durch Eingabe des Befehls gulp ausgeführt werden kann, was einige Tastenanschläge spart.

Schließlich gibt es ein Github-Repositorium für die ganze Arbeit, die wir geleistet haben!

Abschließend

Wir haben die absoluten Grundlagen von Gulp durchgenommen und einen Arbeitsablauf erstellt, der in der Lage ist, Sass in CSS zu kompilieren und gleichzeitig HTML- und JS-Dateien auf Änderungen zu überwachen. Wir können diese Aufgabe mit dem Befehl gulp in der Befehlszeile ausführen.

Wir haben auch eine zweite Aufgabe build erstellt, die einen dist-Ordner für die Produktionswebsite erstellt. Wir haben Sass in CSS kompiliert, alle unsere Assets optimiert und die erforderlichen Ordner in den Ordner dist kopiert. Um diese Aufgabe auszuführen, müssen wir nur gulp build in die Befehlszeile eingeben.

Zu guter Letzt gibt es noch eine clean-Aufgabe, die alle Bild-Caches, die erstellt wurden, aus dem Ordner dist löscht, so dass wir alle alten Dateien, die versehentlich in dist aufbewahrt wurden, entfernen können.

Wir haben bis jetzt einen robusten Arbeitsablauf geschaffen, der für die meisten Webentwickler ausreichend ist. Es gibt noch eine Menge mehr an Gulp und Workflows, die wir erforschen können, um diesen Prozess noch besser zu machen. Hier sind einige Ideen für Sie:

Für die Entwicklung:

• Verwendung von Autoprefixer, um anbieterfreien CSS-Code zu schreiben
• Hinzufügen von Sourcemaps für leichteres Debugging
• Erstellen von Sprites mit sprity
• Kompilieren von nur geänderten Dateien mit gulp-changed
• Schreiben von ES6 mit Babel oder Traceur
• Modularisieren von Javascript-Dateien mit Browserify, webpack oder jspm
• Modularisieren von HTML mit Template-Engines wie Handlebars oder Swig
• Aufteilen der gulpfile in kleinere Dateien mit require-dir
• Automatisches Erzeugen eines Modernizr-Skripts mit gulp-modernizr

Zur Optimierung:

• Entfernen von ungenutztem CSS mit unCSS
• Weiteres Optimieren von CSS mit CSSO
• Erzeugen von Inline-CSS für die Performance mit Critical

Zusätzlich zu den Entwicklungs- oder Optimierungsprozessen können Sie auch JavaScript-Unit-Tests mit gulp-jasmine schreiben und sogar Ihren dist-Ordner mit gulp-rync automatisch auf Ihrem Produktionsserver bereitstellen.

Wie Sie sehen, kann der von uns erstellte Workflow noch viel mehr, obwohl er schon einige Dinge erledigt. Das Erstellen eines Arbeitsablaufs, der Ihren Bedürfnissen entspricht, kann sehr aufregend und erfüllend sein, aber es kann eine Menge sein, wenn Sie neu auf diesem Gebiet sind.

Es gibt so viel mehr zu Gulp, dass es unmöglich ist, es in diesem Blogbeitrag oder sogar in einer Reihe von Beiträgen zu behandeln. Deshalb habe ich ein Buch über die Automatisierung Ihrer Arbeitsabläufe geschrieben, und ich lade Sie ein, zehn Kapitel kostenlos zu lesen, wenn Sie mehr darüber erfahren möchten 🙂