Front-end Workflow mit Gulp

30. Januar 2014, von Christoph

Gulp
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

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.
Datei 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! =)

Christoph Rumpel

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -
3 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
selker
29. Mai 2015 um 18:21

Nette Erklärung und soweit ich weiss auch der einzige, deutsche Artikel, der die ganze Materie gut erklaert. Allerdings hoffe ich, dass man keine dot-files mehr auf github hochlaed, der Beitrag ist ja immerhin schon 1.5 Jahre alt. Vielen dank fuer diesen sehr anschaulichen Artikel nochmals.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Natalia und Marion reden über Usertests
UX/UI Design – Blogbeitrag

9 Fragen zum User Test – was Sie als Auftraggeber wissen sollten

18. September 2019, von Natalia

Euch steht ein User Test bevor? Die Agentur schreibt irgendwas von einem Usability Testing ins Angebot? Und ihr fragt euch jetzt, was das alles bedeutet? Dann lest hier die häufigsten Fragen und Antworten zum Thema User Testing.

Jetzt lesen
Alexandra Wittmann und Susanne Liechtenecker
Arbeitskultur – Podcasts

Folge #53 mit Alexandra Wittmann

8. November 2019

In Folge 53 der Leseliste freuen wir uns auf Alexandra Wittmann, Division CFO bei Hoerbiger. Sie hat schon einige Wandel-Projekte begleitet und blickt mit Susanne auf spannende Aspekte von Unternehmensführung, Erfolg, Digitalisierung und was das für die einzelnen Menschen bedeuten kann.

Jetzt anhören
Close