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

gulp.js ist eine Software, basierend auf Node.js, um verschiedene Aufgaben im Webentwicklungsprozess zu automatisieren (Build-System).^[3][4] 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.^[5]

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

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]

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']);

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', ['']);

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/'));
});

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/'));
});

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.

• 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-93990214-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. 

• Offizielle Website
• gulp.js auf GitHub
• Gulp for Beginners – CSS-Tricks
• Browsersync + Gulp

1. ↑ Release 5.0.1. 1. Juni 2025 (abgerufen am 16. Juni 2025).
2. ↑ License auf github.com. Abgerufen am 30. Mai 2016 (englisch). 
3. ↑ Joshua Barnett: Building a Cross-Platform Mobile Game with HTML5. Hrsg.: University of East Anglia. 2014 (caffeinatednightmare.com). 
4. ↑ Artemij Fedosejev: React.js Essentials. 1. Auflage. Packt Publishing, Birmingham 2015, ISBN 978-1-78355-162-0, Installing Powerful Tools for Your Project, S. 12–14. 
5. ↑ Henri Levälampi: Modular Web Development Framework. Hrsg.: Helsinki Metropolia University of Applied Sciences. Helsinki 4. Dezember 2015. 
6. ↑ gulp – Getting Started. In: gulp.js. Abgerufen am 28. Mai 2016 (englisch). 
7. ↑ Plugins
8. ↑ gulp API docs. In: gulp.js. Archiviert vom Original am 6. März 2017; abgerufen am 16. März 2024 (englisch). 
9. ↑ gulp-imagemin Plugin
10. ↑ Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren. Archiviert vom Original am 16. Juni 2017; abgerufen am 16. März 2024. 
11. ↑ Front-end Workflow mit Gulp. Abgerufen am 30. Mai 2016. 
12. ↑ gulp-uglify Plugin
13. ↑ Browsersync + Gulp.js. Abgerufen am 30. Mai 2016.