Gulp.js
Diese Baustelle befindet sich fälschlicherweise im Artikelnamensraum. Bitte verschiebe die Seite oder entferne den Baustein {{Baustelle}}.
|
gulp.js ist ein Task-Runner basierend auf Node.js um verschiedene Workflow-Tasks im Webentwicklungsprozess zu automatisieren[1][2]. 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.[3]
Insallation
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.[4]
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 Kommandozeile 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 Plugins 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 wir 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 Parametner taskname ist verpflichtend und gibt den Namen vor mit welchem der Task in der Shell ausgeführt werden kann.[5]
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 Befehels 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 druch 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.[6] 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 folgendem Beispiel werden sämtliche JavaScript Dateien aus dem Verzeichnis 'scripts/' mit .pipe(uglify()) optimiert und mit gulp.dest('scripts/') wieder überschrieben[7]. 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 nachfolgendem Beispiel werden die Tasks mit den Namen scripts und images aufgerufen, falls sich JavaScript Dateien oder Bilder in den Angegeben 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.
- 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
Einzelnachweise
- ↑ Joshua Barnett: Building a Cross-Platform Mobile Game with HTML5. Hrsg.: University of East Anglia. 2014 (caffeinatednightmare.com).
- ↑ 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.
- ↑ Henri Levälampi: Modular Web Development Framework. Hrsg.: Helsinki Metropolia University of Applied Sciences. Helsinki 4. Dezember 2015.
- ↑ gulp - Getting Started. In: gulp.js. Abgerufen am 28. Mai 2016 (englisch).
- ↑ gulp API docs. In: gulp.js. Abgerufen am 28. Mai 2016 (englisch).
- ↑ Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren. Abgerufen am 30. Mai 2016.
- ↑ Front-end Workflow mit Gulp. Abgerufen am 30. Mai 2016.