gulp.js ist eine Software, basierend auf Node.js, um verschiedene Aufgaben im Webentwicklungsprozess zu automatisieren (Build-System). 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.
Installation
Gulp benötigt Node.js und wird über den Node Package Manager installiert. Hierfür wird der Befehl in der Shell ausgeführt.
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 startet den Default-Task. Mit wird der Task mit dem jeweiligen taskname ausgeführt.
Zusätzlich gibt es eine Vielzahl an Plug-ins für gulp.Plugins
gulpfile.js Im ersten Schritt müssen alle benötigten Module in der gulpfile.js definiert werden. // Module definieren var gulp = require('gulp'); var gutil = require('gulp-util'); 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. 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. function fn1 () { // tu etwas }
function fn2 () { // tu etwas anderes }
// Task mit Array an Funktionsnamen gulp.task('taskname',['fn1', 'fn2']);
Default-Task Der Default-Task ist jener Task, der mittels Eingabe des Befehls in der Shell ausgeführt wird. In diesem Fall führt der Default-Task nichts aus. // gulp default task gulp.task('default', ['']);
Beispiel-Tasks
Image-Task Für das nachfolgende Beispiel wird das gulp-imagemin Plugingulp-imagemin Plugin benötigt. Hierfür wird durch Ausführen des Befehles in der Shell das benötigte Plugin installiert.
Anschließend muss das Modul am Anfang der gulpfile.js definiert werden: var imagemin = 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. Da wir die optimierten Bilder in einen anderen Ordner speichern, bleiben uns die originalen Bilder erhalten. // images task gulp.task('images', function () { gulp.src('images-orig/*.{png,gif,jpg}') .pipe(imagemin()) .pipe(gulp.dest('images/')); });
Scripts-Task Im folgenden Beispiel werden sämtliche JavaScript-Dateien aus dem Verzeichnis 'scripts/' mit .pipe(uglify()) optimiert und mit gulp.dest('scripts/') wieder überschrieben. Hierfür muss zuvor wieder das benötigte gulp-uglify Plugingulp-uglify Plugin über npm installiert und das Modul am Anfang der gulpfile.js definiert werden. // Script task gulp.task('scripts', function() { gulp.src('scripts/*.js') .pipe(uglify()) .pipe(gulp.dest('scripts/')); });
Watch-Task 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 changes gulp.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. Hierfür gibt es zahlreiche Möglichkeiten und Plugins.
Literatur
Weblinks Offizielle Website gulp.js auf GitHub Gulp for Beginners – CSS-Tricks Browsersync + Gulp
Einzelnachweise
Kategorie:Freie Programmbibliothek Kategorie:JavaScript Kategorie:Build-Management