Eine Einführung in die JavaScript-Automatisierung mit Gulp

Als Webentwickler wiederholen wir manchmal dieselben mühsamen Aufgaben immer wieder. Wenn Sie bedenken, wie viel Zeit verschwendet wird, wenn Sie einen Build-Befehl ausführen oder auf Aktualisieren in Ihrem Browser klicken, werden Sie feststellen, dass Sie viel Zeit sparen können. Darüber hinaus können Sie sich durch die Automatisierung Ihrer Prozesse auf die anstehende Aufgabe konzentrieren, anstatt vorübergehend „die Zone“ (Ihren Produktivitätszustand) zu verlassen.

In diesem Tutorial zur JavaScript-Automatisierung erfahren Sie, wie Sie Ihren Design- und Entwicklungsprozess mit Gulp automatisieren. Wenn Sie eher designorientiert sind, ermutige ich Sie, Ihre Ängste zu überwinden und weiterzulesen. Auf der anderen Seite, wenn Sie ein Entwickler sind, können Sie dies direkt durchgehen, sobald Sie die Logik dahinter verstanden haben.

Gulp ist ein Build-System, das die Streams von Node.js verwendet, um einen asynchronen Quelle-Ziel-Ansatz für die Automatisierung zu implementieren. Alles ist in JavaScript geschrieben, sodass jeder mit fortgeschrittenen Programmierkenntnissen leicht loslegen kann. Ein Gulp-Build-Prozess besteht aus einer Sammlung von Beobachtern und Aufgaben. Darüber hinaus unterhält die Community hinter Gulp ein riesiges Plugin-Verzeichnis innerhalb von npm, das dabei hilft, jede Aufgabe zu erledigen, von der Verkettung von JavaScript bis zur Erstellung von Symbolschriften aus SVGs.

Alternativen zu Gulp

Es gibt viele Alternativen, von denen die meisten in den letzten Jahren entstanden sind – die bemerkenswerteste ist Grunt. Der Wettbewerb zwischen Gulp und Grunt wird nie einen klaren Gewinner haben, da beide ihre Vor- und Nachteile haben, daher werde ich es vermeiden, tief darauf einzugehen. Kurz gesagt, Grunts starkes Vertrauen in die Konfiguration ist es, was die Leute zu Gulps JavaScript-Ansatz lenkt. In der Zwischenzeit haben native GUI-Implementierungen wie Koala etwas an Boden gewonnen, hauptsächlich von Leuten, die sich zurückhalten, ins Programmieren einzusteigen. Mit den gebündelten Anwendungen ist es jedoch unmöglich, das Maß an Anpassbarkeit und Erweiterbarkeit zu erreichen, das Gulp bietet.

Grundlagen der Prozessautomatisierung

Plugins

Plugins sind die Mittel, mit denen gulp jeden Prozess durchführt. Plugins werden über npm installiert und mit „require“ initiiert.

Aufgaben

Für Gulp haben Aufgaben immer eine Quelle und ein Ziel. Dazwischen liegen die Pipes, die jedes Plugin aufrufen und die umgewandelten Ergebnisse an die nächste Pipe ausgeben.

Kugeln

Globs sind Platzhaltermuster, die auf Dateien verweisen. Globs oder Arrays von Globs werden als Eingaben in der Aufgabenquelle verwendet.

Beobachter

Die Beobachter überwachen die Quelldateien auf Änderungen und rufen Tasks auf, wenn eine Änderung erkannt wird.

gulpfile.js

Dies ist die JavaScript-Datei, auf die der Befehl „gulp“ zeigt. Es enthält alles von den Aufgaben bis zu den Beobachtern oder anderen Codeteilen, die von Aufgaben verwendet werden.

Eine einfache Aufgabe

Für den Einstieg benötigen Sie Node.js und eine Kommandozeilen-Shell mit Administratorzugriff. Sie können Node.js hier herunterladen. Nach der Installation können Sie den folgenden Befehl ausführen, um sicherzustellen, dass npm auf dem neuesten Stand ist.

 sudo npm install npm -g

Das Flag -g gibt an, dass die Installation global sein wird.

Jetzt können Sie Gulp installieren und einige einfache Aufgaben ausführen. Verwenden Sie den folgenden Befehl, um Gulp global zu installieren.

 sudo npm install gulp -g

Beachten Sie, dass Sie denselben Befehl auch zum Aktualisieren verwenden können.

Sie können das Starter-Kit, das Ihnen bei Ihrer ersten Aufgabe hilft, von toptal-gulp-tutorial/step1 herunterladen. Es enthält eine sehr einfache Aufgabe, die SCSS-Dateien in CSS kompiliert. Es verwendet das gulp-sass-Plugin, das libsass verwendet. Ich habe mich hier für libsass entschieden, weil es viel schneller ist als die Ruby-Alternative, obwohl ihm einige seiner Funktionen fehlen. Sobald Sie sich im Stammverzeichnis Ihres Projekts befinden, können Sie den folgenden Befehl verwenden, um alle erforderlichen Plugins zu installieren.

 npm install

Dieser Befehl liest die Datei „package.json“ und installiert alle erforderlichen Abhängigkeiten. Wir verwenden „npm install“ hier als Abkürzung für Folgendes:

 npm install gulp --save-dev npm install gulp-sass --save-dev

Das „–save-dev“-Flag fügt die ausgewählten Plugins zur package.json devDependencies hinzu, sodass Sie beim nächsten Mal, wenn Sie alles installieren möchten, das praktische „npm install“ verwenden können.

An diesem Punkt können Sie Ihre erste Aufgabe ausführen. Führen Sie den folgenden Befehl aus und beobachten Sie, wie alle SCSS-Dateien im Ordner /scss im entsprechenden Verzeichnis in CSS kompiliert werden:

 gulp scss

Beachten Sie, dass wir in diesem Beispiel die auszuführende Aufgabe angeben. Wenn wir den Task-Namen weglassen würden, würde der mit dem Namen „default“ ausgeführt werden.

Code-Komplettlösung

Das obige wird in nur 7 Zeilen JavaScript-Code erreicht. Sicherlich werden Sie sich wie zu Hause fühlen, sobald Sie die Einfachheit begreifen:

 var gulp = require('gulp'); var scss = require('gulp-sass');

Am Anfang initialisieren wir alle Plugins, die wir verwenden werden. Gulp ist der einzige, auf den wir nicht verzichten können:

 gulp.task('scss', function() {

Wir definieren die Aufgabe namens „scss“:

 return gulp.src('scss/*.scss')

Legen Sie die Quelldateien für die Aufgabe fest. Diese werden als Globs definiert. In diesem Beispiel beziehen wir uns auf alle Dateien im Ordner „scss/“, die auf „.scss“ enden.

 .pipe(scss())

An dieser Stelle rufen wir das Gulp-sass-Plugin auf, das wir zuvor definiert haben:

 .pipe(gulp.dest('css'));

Schließlich verwenden wir „gulp.dest“, um den Zielordner für unsere Dateien festzulegen. Dies könnte auch ein einzelner Dateiname sein, wenn die Dateien verkettet wurden.

Um diese Implementierung der Prozessautomatisierung weiter zu verbessern, können Sie versuchen, einige andere Gulp-Plug-ins einzubinden. Beispielsweise möchten Sie möglicherweise das Endprodukt Ihrer Aufgabe mit gulp-minify-css minimieren und automatisch Anbieterpräfixe mit gulp-autoprefixer hinzufügen.

Beschäftigung eines Beobachters

Ich habe ein Watcher-Starterkit erstellt, das Sie sofort verwenden können. Sie können es von toptal-gulp-tutorial/step2 herunterladen. Es enthält eine verbesserte Version der zuvor erstellten SCSS-Aufgabe und einen Beobachter, der die Quelldateien überwacht und die Aufgabe aufruft. Um es zu starten, verwenden Sie den folgenden Befehl:

 gulp

Dieser Befehl startet die „Standard“-Aufgabe, die den Watcher initiiert. An dieser Stelle können Sie jede der SCSS-Dateien bearbeiten und beobachten, wie die CSS-Dateien neu kompiliert werden. Sie können die Benachrichtigungen von Gulp in der Befehlszeile sehen.

Code-Komplettlösung

Wir haben für unsere Aufgabe einen Watcher mit nur 3 zusätzlichen Codezeilen eingerichtet. Das Watcher-Starterkit unterscheidet sich jedoch nicht wesentlich vom Einführungsbeispiel. In diesem Abschnitt gehen wir alle Ergänzungen und Änderungen durch.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

In diesem Beispiel wird die Gulp-Quelle mit einem Array von Globs bereitgestellt. Der erste schließt alle Dateien ein, die auf „.scss“ enden, auch in Unterordnern, und der zweite schließt diejenigen aus, die mit „_“ beginnen. Auf diese Weise können wir die eingebaute Funktion @import von SCSS verwenden, um die Datei _page.scss zu verketten.

 gulp.task('default', ['scss'], function() {

Hier definieren wir die „Standard“-Aufgabe. Die Task „scss“ wird als Abhängigkeit vor „default“ ausgeführt.

 gulp.watch('scss/**/*.scss', ['scss']);

Schließlich rufen wir die Watch-Funktion von Gulp auf, um auf jede Datei mit der Endung „.scss“ zu zeigen und immer dann, wenn ein Änderungsereignis eintritt, die „scss“-Aufgabe auszuführen.

Jetzt können Sie neue Beobachter für andere automatisierte Prozesse wie JavaScript-Verkettung, Code-Hinweise, CoffeeScript-Kompilierung oder alles andere, was Ihnen in den Sinn kommt, erstellen. Um tiefer in diese JavaScript-Automatisierungsimplementierung einzutauchen, schlage ich vor, gulp-notify hinzuzufügen, das Sie benachrichtigt, wenn eine Aufgabe ausgeführt wird. Außerdem können Sie eine separate Aufgabe erstellen, um den resultierenden CSS-Code zu verkleinern und die „scss“-Aufgabe als Abhängigkeit davon auszuführen. Schließlich können Sie gulp-rename verwenden, um den resultierenden Dateien das Suffix „.min“ hinzuzufügen.

Erweiterte Gulp-Plugins für die JavaScript-Automatisierung

Es gibt Tausende von Plugins in der Plugin-Basis von Gulp, von denen einige weit über die einfache JavaScript-Automatisierung eines Build-Prozesses hinausgehen. Hier ein paar herausragende Beispiele:

BrowserSync

BrowserSync fügt CSS, JavaScript ein und aktualisiert den Browser automatisch, wenn eine Änderung vorgenommen wird. Darüber hinaus enthält es eine GhostMode-Funktion, mit der Sie Ihre Kollegen erschrecken oder Ihre Browsertests erheblich beschleunigen können.

Browserify

Browserify analysiert die „Require“-Aufrufe in Ihrer Anwendung und konvertiert sie in eine gebündelte JavaScript-Datei. Außerdem gibt es eine Liste von npm-Paketen, die in Browsercode konvertiert werden können.

Webpaket

Ähnlich wie Browserify zielt Webpack darauf ab, Module mit Abhängigkeiten in statische Dateien umzuwandeln. Dieser gibt dem Benutzer mehr Freiheit, wie die Modulabhängigkeiten festgelegt werden, und zielt nicht darauf ab, dem Codestil von Node.js zu folgen.

Karma

Gulp-karma bringt die berüchtigte Testumgebung nach Gulp. Karma folgt dem Ansatz der geringsten Konfiguration, den auch Gulp unterstützt.

Fazit

In diesem Tutorial zur Prozessautomatisierung habe ich die Schönheit und Einfachheit der Verwendung von Gulp als Build-Tool demonstriert. Indem Sie die im Tutorial beschriebenen Schritte befolgen, sind Sie nun bereit, Ihren Softwareentwicklungsprozess sowohl in Ihren zukünftigen als auch in Ihren Altprojekten vollständig zu automatisieren. Wenn Sie etwas Zeit in die Einrichtung eines Build-Systems für Ihre älteren Projekte investieren, sparen Sie in Zukunft sicherlich wertvolle Zeit.

Bleiben Sie dran für ein fortgeschritteneres Gulp-Tutorial, das bald verfügbar ist.