Gulp.js

gulp.js
Basisdaten
Entwickler Fractal und Mitwirkende der GitHub-Community
Aktuelle Version 5.0.1
(1. Juni 2025)
Betriebssystem plattformübergreifend
Programmier­sprache JavaScript
Kategorie Build-System
Lizenz MIT-Lizenz
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

Einzelnachweise

  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. Archiviert vom Original (nicht mehr online verfügbar) am 25. Juni 2016; abgerufen am 30. Mai 2016.  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
  12. ↑ gulp-uglify Plugin (Memento des Originals vom 23. Februar 2017 im Internet Archive)  Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.
  13. ↑ Browsersync + Gulp.js. Abgerufen am 30. Mai 2016.