gulp.js ist eine Software, basierend auf Node.js, um verschiedene Aufgaben im Webentwicklungsprozess zu automatisieren (Build-System).[4][5] So kann gulp zum Beispiel genutzt werden, um HTML, JavaScript und CSS zu verkleinern, SCSS in CSS umzuwandeln, Bilder zu optimieren und Dateien in einen „dist“-Ordner zu kopieren. Außerdem kann gulp dazu genutzt werden, um den Webbrowser automatisch zu aktualisieren oder den Webserver automatisch zu starten.[6]
Gulp benötigt Node.js und wird über den Node Package Manager installiert. Hierfür wird der Befehl npm install --global gulp-cli in der Shell ausgeführt.[7]
Funktionsweise
Um mit gulp arbeiten zu können, muss ein sogenanntes gulpfile angelegt werden. Bei dem gulpfile handelt es sich um eine JavaScript-Datei mit dem Namen „gulpfile.js“. In diesem File werden sogenannte Tasks in JavaScript definiert. Diese gulp-Tasks werden über die Shell ausgeführt. Der Befehl gulpstartet den Default-Task. Mit gulp <taskname> wird der Task mit dem jeweiligen taskname ausgeführt.
Zusätzlich gibt es eine Vielzahl an Plug-ins für gulp.[8]
gulpfile.js
Im ersten Schritt müssen alle benötigten Module in der gulpfile.js definiert werden.
Im nächsten Schritt können dann die Tasks erstellt werden. Ein gulp-Task wird mittels gulp.task definiert und bekommt einen Namen für den Task als ersten Parameter und als zweiten Parameter eine Funktion.
Das folgende Beispiel zeigt die Erstellung eines gulp-Tasks. Der erste Parameter taskname ist verpflichtend und gibt den Namen vor, mit dem der Task in der Shell ausgeführt werden kann.[9]
gulp.task('taskname',function(){// tu etwas});
Alternativ kann ein Task erstellt werden, der mehrere vordefinierte Funktionen ausführt. Diese werden als zweiter Parameter mittels eines Arrays übergeben.
functionfn1(){// tu etwas}functionfn2(){// tu etwas anderes}// Task mit Array an Funktionsnamengulp.task('taskname',['fn1','fn2']);
Default-Task
Der Default-Task ist jener Task, der mittels Eingabe des Befehls gulp in der Shell ausgeführt wird. In diesem Fall führt der Default-Task nichts aus.
// gulp default taskgulp.task('default',['']);
Beispiel-Tasks
Image-Task
Für das nachfolgende Beispiel wird das gulp-imagemin Plugin[10] benötigt. Hierfür wird durch Ausführen des Befehles npm install --save-dev gulp-imagemin in der Shell das benötigte Plugin installiert.
Anschließend muss das Modul am Anfang der gulpfile.js definiert werden:
varimagemin=require('gulp-imagemin');
Der nachfolgende Image-Task führt eine Optimierung von Bildern durch. gulp.src() holt sich alle Bilder mit der Endung .png, .gif oder .jpg aus dem Verzeichnis 'images-orig/'. .pipe(imagemin()) schleußt die gefundenen Bilder durch den Optimierungsprozess durch und mit .pipe(gulp.dest()) werden die optimierten Bilder danach ins Verzeichnis 'images/' gespeichert. Ohne gulp.dest() würden die Bilder zwar optimiert, jedoch nicht abgespeichert werden.[11] Da wir die optimierten Bilder in einen anderen Ordner speichern, bleiben uns die originalen Bilder erhalten.
Im folgenden Beispiel werden sämtliche JavaScript-Dateien aus dem Verzeichnis 'scripts/' mit .pipe(uglify()) optimiert und mit gulp.dest('scripts/') wieder überschrieben.[12] Hierfür muss zuvor wieder das benötigte gulp-uglify Plugin[13] über npm installiert und das Modul am Anfang der gulpfile.js definiert werden.
Der Watch-Task dient dazu, um auf Änderungen von Dateien zu reagieren. In dem nachfolgenden Beispiel werden die Tasks mit den Namen scripts und images aufgerufen, falls sich JavaScript-Dateien oder Bilder in den angegebenen Verzeichnissen ändern sollten.
// Rerun the task when a file changesgulp.task('watch',function(){gulp.watch('scripts/**.js',['scripts']);gulp.watch('images-orig/**',['images']);});
Des Weiteren besteht die Möglichkeit, eine Aktualisierung des Browserinhaltes mittels des Watch-Tasks zu bewerkstelligen.[14] Hierfür gibt es zahlreiche Möglichkeiten und Plugins.
Den Odell: Pro JavaScript Development Coding, Capabilities, and Tooling. 1. Auflage. Apress, 2014, ISBN 978-1-4302-6268-8, Build Tools and Automation, S.400–408.
