gulp.js

Gulp.js
Basisdaten
Entwickler	Fractal und Mitwirkende der GitHub-Community
Aktuelle Version	5.0.0 (29. März 2024)
Betriebssystem	plattformübergreifend
Programmiersprache	JavaScript
Kategorie	Build-System
Lizenz	MIT-Lizenz
www.gulpjs.com/

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 npm install --global gulp-cli 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 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.

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 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

Image-Task

Für das nachfolgende Beispiel wird das gulp-imagemin Plugin 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. 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 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

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

Weblinks

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