Front-end Workflow mit Gulp

Bild

Vor genau 123 Tagen habe ich euch den Task-Runner Grunt vorgestellt und gezeigt wie man Bildoptimierung in seinen täglichen Workflow einbauen kann und auch sollte. Mittlerweile gibt es schob über 2000 Grunt Plugins und es werden täglich mehr. Man kann sich also vorstellen, dass die Möglichkeiten hier quasi unbegrenzt sind. Für wirklich jeden Workflow ist hier etwas dabei und das sind nur ein paar Gründe warum Grunt so beliebt und verbreitet ist. Kein Wunder, dass bis jetzt kein Konkurrenzprodukt in Sicht war. Doch diese Zeit ist vorbei. Gulp steigt in den Ring und erhebt Anspruch auf die bisherige Alleinherrschaft von Grunt.

Warum brauchen wir Gulp

Bereits seit Mitte des letzten Jahres gibt es Gulp. Grob gesagt ist es genau wie Grunt: Ein Task-Runner der einem dabei Hilft, tägliche Aufgaben zu automatisieren. Trotzdem gibt es Unterschiede und Gulp geht neue Wege. Worin sich diese Tools unterscheiden und  wo die Vorteile bzw. Nachteile liegen möchte ich in diesem Artikel veranschaulichen.
Bevor wir uns die Details in einem Beispiel genau ansehen möchte ich hier zuerst noch die wichtigsten Nachteile von Grunt aufzeigen.

• die Grunt Konfiguration ist oft sehr lang , unübersichtlich und undurchschaubar
• die Grunt Plugins beinhalten zu viel Logik, Teilaufgaben sind in vielen Plugins enthalten

Das sind genau die Punkte die Gulp besser machen möchte. Den besten Überblick bekommt man natürlich bei einem realen Beispiel, weshalb wir auch gleich damit beginnen werden. In unserem Beispiel werden wir typische Assets-Aufgaben automatisieren: Sass kompilieren, JavaScript komprimieren und Bilder optimieren.

No Need To Grunt, Take A Gulp Of Fresh Air – Travis Maynard

Setup

Bild

Auf die Installation von Gulp und NodeJS  werde ich hier nicht eingehen. Nach der Installation solltet ihr in eurem Assets Ordner eine leere Gulpfile.js Datei, eine package.json Datei und einen node_modules Ordnern haben. Nun erstellen wir noch unsere gewünschte File-Struktur.

Was wollen wir nun genau erreichen:

• Sass Datei kompilieren in den styles Ordner
• JS File komprimieren
• Bilder aus images-orig optimieren und in images speichern

Styles Task

Zuerst installieren wir das Gulp Sass Modul mit „npm install gulp-sass —-save“
Über den save Parameter schreiben wir das Modul automatisch in unsere package.json Datei. Das Gulpfile.js Grundgerüst sieht wie folgt aus:

// Module definieren
var gulp = require('gulp');
var gutil = require('gulp-util');
// Gulp default task
gulp.task('default', ['']);

Jedes eingesetzte Modul wird im Gulpfile.js in einer Variabel gespeichert. Jetzt können wir einen neuen Task definieren und wir beginnen mit unseren Styles.

// Styles task
gulp.task('styles', function () {
    gulp.src('sass/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('styles'));
});

Was hier passiert ist simpel. Wir geben eine Quelle für unsere Sass Datei an, danach lassen wir das Sass Modul über die Datei laufen und geben die neue Datei an einem Zielort aus. Hier ist der erste Unterschied zu Grunt gleich zu sehen: gulp.src und gulp.dest sind Gulp API Funktionen. Da wir bei vielen Tasks Dateien lesen und schreiben wollen, ist es sinnvoll diese Aufgaben aus den Modules auszulagern. Weiters setzten wir den Styles Task als default. Dadurch wird dieser gestartet wenn wir “gulp” im Terminal eingeben. Danach sollte die kompilierte Datei unter dem Ordner styles zu finden sein.

// Gulp default task
gulp.task('default', ['styles']);

Script Task

Im zweiten Task wollen wir unsere JavaScript Datei komprimieren. Dafür verwenden wir das Uglify Modul.

npm install gulp-uglify —save

Auch hier müssen wir jetzt das Modul im Gulpfile.js in einer Variabel definieren, bevor wir es im nächsten Task verwenden können.

// Script task
gulp.task('scripts', function() {
    gulp.src('scripts/main.js')
        .pipe(uglify())
        .pipe(gulp.dest('scripts/'));
});

Nachdem wir uns wieder zuerst die gewünscht Datei holen, schicken wir sie durch das Uglify Modul und überschreiben sie dann. Nun haben wir eine komprimierte Version.

Images Task

Als nächstes wollen wir uns noch das Optimieren von Bilder ansehen. Wieder installieren wir hierfür ein Modul und setzen die Variable im Gulpfile.js.

npm install gulp-imagemin —-save

Auch dieser Task ist recht simpel. Diesmal beschränken wir jedoch die Auswahl der Dateien auf bestimmte Dateiformate, da das Modul nur für diese ausgerichtet ist. Danach schmeißen wir die Dateien in das Bild-Optimierungsmodul und von dort gelangen sie in den images Ordner. Für die Entwicklungen können wir jetzt die optimierten Bilder verwenden, aber zur Sicherheit haben wir noch die Original Bilder parat, falls wir sie benötigen.

// Images task
gulp.task('images', function () {
    gulp.src('images-orig/*.{png,gif,jpg}')
        .pipe(imagemin())
        .pipe(gulp.dest('images/'));
});

Watch Task

Zuletzt wäre es vielleicht noch praktisch, wenn all diese Tasks automatisch gestartet werden, sobald sich etwas ändert. Auch das ist bei Gulp möglich und sogar schon integriert. Wir benötigen daher kein weiteres Modul.
Im Task watch definieren wir, wo wir nach Änderungen Ausschau halten und welcher Task bei Änderungen gestartet werden soll. Auch den neuen watch Task müssen wir als default Task definieren, damit er ab Beginn von Gulp läuft.

// Rerun the task when a file changes
gulp.task('watch', function () {
    gulp.watch('sass/**.scss', ['styles']);
    gulp.watch('scripts/**.js', ['scripts']);
    gulp.watch('images-orig/**', ['images']);
});

Wenn wir jetzt gulp in der Konsole eingeben, werden zuerst alle unser Tasks gestartet die wir unter default definiert haben. Der Prozess endet aber danach nicht, da der watch Task weiter auf Änderungen wartet.
Den kompletten Code haben wir für euch auf Github zur Verfügung gestellt.

Fazit

Et voilà, in nur 37 Zeilen haben wir unsere Automationen mit Gulp konfiguriert. Unser Code ist kurz, übersichtlich und effektiv. Genau hier sind einige Vorteile gegenüber Grunt zu erkennen. Deshalb haben wir uns auch entschieden unseren Workflow für Gulp zu adaptieren. Trotzdem ist es noch relativ neu am Markt und muss sich erst über einen längeren Zeitraum bewähren. Natürlich empfiehlt sich der Umstieg nicht sofort für jeden. Am Besten ihr verschafft euch selbst einen Überblick und bildet eine eigene Meinung dazu. Wir sind auf jeden Fall schon im Gulp-Fieber! =)