Gulp.js
# Gulp.js

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.

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.

Alternativ kann ein Task erstellt werden, der mehrere vordefinierte Funktionen ausführt. Diese werden als zweiter Parameter mittels eines Arrays übergeben.

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

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

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.

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

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

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.

