Gulp.js

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.^[7]

Remove ads

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.^[8]

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 gulp in der Shell ausgeführt wird. In diesem Fall führt der Default-Task nichts aus.

// gulp default task
gulp.task('default', ['']);

Beispiel-Tasks

Zusammenfassung

Kontext

Image-Task

Für das nachfolgende Beispiel wird das gulp-imagemin Plugin^[9] 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:

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.^[10] 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.^[11] Hierfür muss zuvor wieder das benötigte gulp-uglify Plugin^[12] ü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.^[13] Hierfür gibt es zahlreiche Möglichkeiten und Plugins.

Remove ads

Literatur

Jed Mao, Maximilian Schmitt, Tomasz Stryjewski, Cary Landholt, William Lubelski: Developing a Gulp Edge. The Streaming Build System. Bleeding Edge Press, 2014, ISBN 978-1-939902-14-6 (proquest.tech.safaribooksonline.de).
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.

gulp.js

Basisdaten
Entwickler	Fractal und Mitwirkende der GitHub-Community
Aktuelle Version	5.0.1^[1] (1. Juni 2025)
Betriebssystem	plattformübergreifend
Programmiersprache	JavaScript
Kategorie	Build-System
Lizenz	MIT-Lizenz^[2]
gulpjs.com/

Installation