Gulp Basics: Ein Einsteiger Tutorial

Gulp.js ist ein sogenannter "Task Runner", oder auch, wie sich Gulp selber nennt, ein "streaming build system". Kurz gesagt: Es übernimmt nervige, immer wiederkehrende Aufgaben in der Frontend Entwicklung, automatisiert und erweitert diese. Typische Tasks können beispielsweise die Optimierung von Bildern fürs Web, minifizieren von JavaScript Dateien oder das Kompilieren von SASS Dateien in CSS sein. All dies kann, wenn ein entsprechender Gulp Task angelegt wurde, mit einem kurzen Befehl auf der Kommandozeile erledigt werden. Bei Bedarf können auch beliebige Tasks kombiniert werden, so dass ein einziger Befehl reicht eine Webseite "ausgeh-fein" zu machen und auf den Server zu schieben.

Was wird benötigt um Gulp zu nutzen?

Um Gulp nutzen zu können muss selbstverständlich Gulp installiert sein. Dazu braucht man folgendes:

Ein Terminal
node.js muss installiert sein

1.Terminal - Auf der Kommandozeile arbeiten

Ich als eigentlich eher visueller Mensch hab mich häufig schwer getan auf der Kommandozeilen Ebene zu arbeiten. Zu unrecht. Vieles geht einfacher, schneller und besser. Und wenn man einmal angefangen hat machts auch wirklich Spaß. Das nur zum Einstieg um dem ein oder anderen die Berührungsängste zu nehmen.

Unter Mac OSX erreicht ihr das Terminal am schnellsten wenn ihr oben rechts auf das "Lupen" Icon klickt und "Terminal" eingebt. Linux Usern muss ich, glaube ich, nicht erklären wie sie ihr Terminal öffnen. Unter Windows gibt es die cmd.exe oder das Tool Powershell. Gerade was Windows angeht kann ich aber nicht mit eigenen Erfahrungen glänzen. Im Zweifel müßt ihr euch selber "ergoogeln" wie ihr hier ein Kommandozeilen Programm öffnen.

2. Node.js installieren

Hier könnt ihr euch Node.js herunterladen. Node.js enthält den "Node Packet Manager" (kurz "npm") mit dem Gulp schließlich installiert wird. Einfach den Installations- Anweisungen folgen.

Gulp installieren

Öffnet nun euer Kommandozeilen Tool und gebt ein:

$ npm install --global gulp

Wichtig, für alle Kommandozeilen Anfänger: Das "$" Symbol steht schon automatisch vorne. Also nicht mit kopieren! Solltet ihr Fehlermeldungen in Bezug auf Berechtigungen erhalten kann es sein das ihr Gulp mit Admin Rechten installieren müsst. Gebt dazu:

$ sudo npm install --global gulp

ein. Ihr werdet dann anch dem Admin Kennwort gefragt. Dies gilt auch für alle weiteren Schritte. Einfach "sudo" davor schreiben, wenn es Probleme gibt. Damit ist Gulp global auf eurem Rechner installiert und verfügbar.

Nun wechselt in der Konsole in euren Projekt Ordner. Eben dorthin wo ihr Gulp nutzen wollte. Für dieses Beispiel legen wir einen neuen Ordner mit dem Namen "/project" an:

$ mkdir project

und wechseln dann in diesen mit:

$ cd project

In diesem Verzeichnis müssen wir zunächst eine package.json Datei anlegen, bevor wir Gulp für dieses Verzeichnis bereit stellen. Gebt folgendes ein:

$ npm init

Jetzt werden euch einige Fragen gestellt. Ihr könnt getrost überall Enter drücken. Die Angaben können später noch in der package.json Datei manuell geändert werden. Zu guter letzt muss Gulp noch im lokalen Ordner installiert werden:

$ npm install --save-dev gulp

Jetzt wird Gulp als npm Modul installiert. Es wird automatisch ein Unterordner mit dem Namen "/node_module" angelegt in den Gulp installiert wird. Ihr werden auch merken das sich eure package.json Datei geändert hat. Ihr findet darin in etwa sowas wie das hier:

"devDependencies": { "gulp": "^3.8.11", },

Gut zu wissen: Wenn ihr jetzt eure Projekt auf einen anderen Rechner transferiert (auf dem schon node.js und Gulp global installiert sind) braucht ihr nur folgenden Befehl ausführen:

$ npm install

und Gulp wird mit installiert.

Jetzt steht Gulp für euer Projekt bereit.

gulpfile.js anlegen

Um Gulp Tasks anlegen zu können müßt ihr jetzt in eurem "/project" Ordner eine Datei mit dem Namen gulpfile.js anlegen und folgenden Code hinterlegen:

var gulp = require('gulp');

gulp.task('default', function() { // place code for your default task here });

Mit var gulp = require('gulp'); wird das Modul "gulp" angefordert, mit gulp.task('default', function( // place code for your default task here ) {}); wird ein erster Task mit dem Namen "default" definiert. Diese macht noch rein gar nichts. Wenn ihr jetzt aber auf der Kommandozeile:

$ gulp default

eingebt, wird dieser immerhin schon einmal ausgeführt.

Ein Beispiel Task - SASS Datein in CSS kompilieren

Für fast alle erdenklichen Aufgaben gibt es Gulp Plugins. Diese werden wie folgt installiert:

$ npm install namedesplugins

Wenn wir wollen das diese Plugins in der package.json Datei mit gespeichert werden und so leicht mit npm install mit installiert werden können muss der Befehl wie folgt lauten:

npm install namedesplugins --save-dev

Für dieses Beispiel wollen wir SASS Dateien in CSS Dateien kompilieren. Dazu brauchen wir das gulp-sass Plugin und geben auf der Kommandozeile folgendes ein:

npm install gulp-sass --save-dev

Der Gulp SASS Kompiler steht uns jetzt für unsere Tasks zur Verfügung. Wir müssen ihn nur noch in die gulpfile.js eintrage:

var gulp = require('gulp'); var sass = require('gulp-sass');

gulp.task('default', function() { // place code for your default task here });

und dann definieren was gemacht werden soll:

var gulp = require('gulp'); var sass = require('gulp-sass');

gulp.task('default', function() { gulp.src('./sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); });

Die Zeile gulp.src('./sass/*.scss') sagt soviel wie: "nimm alle Dateien mit der Endung .scss aus dem Ordner /sass/..."
Die zweite Zeile .pipe(sass()) gibt an das diese eben definierten Dateien das Modul "gulp-sass" durchlaufen sollen
Die dritte Zeile .pipe(gulp.dest('./css')); sagt: "...und speichere das Ergebnis dann im Ordner /css/ ab"

Wenn jetzt im "/project" Ordner ein Verzeichniss "/sass" anlegt wird, in dieses .scss Dateien ablegt werden und auf der Kommandozeile der Befehl:

$ gulp default

ausführt wird, werden die .scss Dateien kompiliert und als .css Dateien im Ordner "/css/" ausgegeben.

Fazit

Dieses Tutorial bietet natürlich nur einen kurzen Einsteig in das Theme Gulp und soll einfach Lust auf mehr machen. Es gibt über Tausend Plugins für Gulp und entsprechend weitaus mehr Einsatzmöglichkeiten. Einmal verstanden und richtig eingesetzt kann Gulp das Leben als Webdesigner und Frontend Entwickler erheblich vereinfachen und effizienter gestalten.