Gulp Grundlagen: Arbeitsabläufe mit gulp automatisieren

Gulp Grundlagen

Seit knapp drei Jahren ist Task-Automatisierung ein ganz großes Thema. Seinen Anfang hat alles mit grunt genommen. Bald folgten unter anderem auch gulp und brunch. Ganz egal für welches Tool man sich entscheidet, die Automatisierung von Arbeitsabläufen kann durchaus Sinn machen.
In einer Reihe von Artikeln will ich euch gulp und meine bevorzugten gulp-Plugins vorstellen. Alle gulpfiles, die ich in diesem Rahmen erstellen, teile ich auch auf GitHub.

Was dieser Artikel abdeckt

  • Gulp Grundlagen
  • Was ist gulp?
  • gulp installieren
  • gulp in einem Projekt integrieren
  • gulp-Plugins finden und installieren

Außerdem erstellen wir ein Projekt bei dem Less zu CSS kompiliert wird. Das fertige Beispiel kann man hier downloaden.

Was ist gulp?

Gulp ist ein build system (dt. Erstellungsprozess), das es möglich macht gewisse Aufgaben beim Erstellen von Websites zu automatisieren. Der Sinn dahinter ist, dass man sich auf die eigentliche Entwicklung der Website, App, etc. konzentrieren kann, ohne sich ständig um das Rundherum kümmern zu müssen. Zum Rundherum gehören Dinge wie Javascript oder CSS-Dateien zusammenfassen und minifyen, Browser refreshen, Less oder Sass kompilieren, unnötiges CSS entfernen, Sprites erstellen, usw.

Wie bereits erwähnt, gibt es verschiedene Werkzeuge, die diese Aufgaben erledigen können. Ich habe bereits mit grunt gearbeitet, bin aber bei gulp geblieben, weil mir die Syntax ganz einfach am sympathischsten ist.

Die Grundlage für das Automatisieren von Arbeitsabläufen bietet gulp.js an sich. Die einzelnen Aufgaben werden von Plugins erledigt, die man nach belieben installieren kann.

Gulp installieren

Hinweis: Für die Installation von gulp muss npm installiert sein. Wie man npm auf OSX 10.9. installiert, habe ich in dem Artikel „npm (node package manager) auf OS X 10.9. Mavericks installieren¡ beschrieben (gilt auch für OSX 10.10.).

Zuerst muss gulp global installiert werden. Man öffnet die Kommandozeile (Terminal, iTerm,...) und gibt folgendes ein:

npm install --global gulp

Damit ist gulp global auf den Rechner verfügbar.

Gulp in einem Projekt integrieren

Bevor wir die einzelnen Schritte durchgehen, empfehle ich meine vorbereitete Ordnerstruktur herunter zu laden.

Durch die globale Installation kann gulp nun genutzt werden. Um Aufgaben mit gulp erstellen zu können muss im Projektordner ein Dokument namens gulpfile.js erstellt werden. Ich mache das gerne gleich über den Terminal, da man ihn sowieso in weiterer Folge für das Ausführen der Aufgaben benötigt. Wenn man sich noch nicht im Projektordner befindet, muss man mit cd hinnavigieren.

Gulp Grundlagen: gulpfile.js erstellen

gulpfile.js erstellen

Auf OSX kann man Dateien mit touch dateiname erstellen.

cd /pfad/zu/meinem/projektordner
touch gulpfile.js

Oder auf Windows:

cd /pfad/zu/meinem/projektordner
echo. 2> gulpfile.js

gulp lokal installieren

Damit wir gulp aufrufen können, müssen wir es noch lokal installieren und es mit --save-dev in den devDependencies der package.json Datei speichern. Mit dem Zusatz --save-dev legen wir fest, dass gulp für die Entwicklung dieses Projekts eine Voraussetzung ist.

npm install gulp --save-dev

Hinweis: Eine package.json Datei lässt sich über den Terminal mit npm init erstellen. Die Eingabeaufforderungen, die dann erscheinen, kann man ruhig mit Enter bestätigen ohne etwas auszufüllen.

Dadurch wird automatisch im Projektordner ein node_modules Ordner erstellt. In diesem Ordner befindet sich nun gulp und in weiterer Folge alle Plugins.

gulp Aufgaben (tasks) erstellen

Nachdem wir nun ein gulpfile erstellt und gulp lokal installiert haben, müssen wir gulp im gulpfile einbinden. Das machen wir in dem wir eine Variable gulp erstellen und ihr zuweisen, dass gulp geladen werden soll.

var gulp = require('gulp');

Danach kann man schon den ersten Task erstellen.

gulp.task('default', function() {
    console.log('Test');
});

gulp.task übergibt man zwei Parameter, den Namen des Tasks und eine anonyme Funktion mit der Funktionalität. Führt man dann in der Kommandozeile gulp aus, sieht man wie das Wort „Test“ ausgegeben wird.

Gulp-Plugins finden und installieren

Eine einfache Textausgabe ist in den meisten Fälle wohl relativ nutzlos. Deswegen wollen wir jetzt eine sinnvollere Aufgabe erstellen. Wenn wir zum Beispiel less kompilieren möchten, müssen wir dafür ein Plugin installieren. Plugins findet man auf der Gulp Website oder auch auf der npm Website.

Ein Plugin, das less kompiliert ist beispielsweise gulp-less. Die Installation und Nutzung ist auf der gulp-less npm Seite und auf GitHub beschrieben.

Less mit gulp-less kompilieren

Die Ordnerstruktur unseres Projektordners sollte aktuell so aussehen:

meinprojekt
    - css
    - gulpfile.js
    - less
        - styles.less
    - node_modules
        - gulp
    - package.json

Für die Installation des Plugins muss man sich in der Kommandozeile wieder (oder immer noch) im Projektordner befinden und gulp-less installieren und als Dev-Dependency speichern.

npm install gulp-less --save-dev

Im nächsten Schritt muss gulp-less, ähnlich wie gulp, eingebunden werden.

var gulp = require('gulp'),
    less = require('gulp-less');

Dann muss wieder ein Task definiert werden:

gulp.task('lesszucss', function() {
    return gulp.src('less/styles.less')
        .pipe(less())
        .pipe(gulp.dest('css'))
});

In diesem Task passieren drei Dinge:

return gulp.src('styles.less')

...gibt an welche less Datei kompiliert werden soll.

.pipe(less())

....pipe() „stückelt“ eine Aufgabe an diese Datei. In diesem Fall die Kompilierung eben dieser Datei.

.pipe(gulp.dest('css'))

...hängt eine weitere Aufgabe an. Und zwar wird die kompilierte CSS-Datei mit gulp.dest() in den css Ordner verschoben.

Führt man dann in der Kommandozeile gulp lesszucss aus, wird less kompiliert und styles.css im css-Ordner erstellt.

Das war es auch schon. Innerhalb kürzester Zeit haben wir gulp installiert und einen task geschrieben, der Less zu CSS kompiliert. Der Ablauf für das Installieren weiterer Plugins sieht ähnlich aus: Plugin suchen, herunterladen und als Dev-Dependency speichern, Task schreiben und ausführen.

Zusammenfassung

Wie man sieht, ist gulp einfach und schnell zu installieren und auch verhältnismäßig einfach anzuwenden. Das Kompilieren von Less ist zwar eine Aufgabe, die auch andere Tools oder Programme erledigen können, aber dieser Task sollte lediglich nur ein Beispiel dafür sein, was mit gulp möglich ist und wie der grundsätzliche Arbeitsablauf aussieht.
Wie bereits erwähnt gibt es weitere Beispiele in meinem GitHub Repo.

Manuel Matuzovic

Frontend Developer aus Wien.

2 Kommentare zu “Gulp Grundlagen: Arbeitsabläufe mit gulp automatisieren

  1. Hi,

    wie werden in „gulpfile.js“ die vorhandnen javascript oder css dateien aktualisiert. zum beispiel füge ich weitere *.js datei hinzu, damit diese auch zusammenfasst und minifyet werden. Macht gulp dass automatisch? Wie funktioniert das?

    1. Hallo, entschuldige bitte die späte Anwort, aber ich war die letzten Tage im Ausland und nicht Online.

      Es kommt darauf an welches Plugin du verwendest. Bei gulp-concat-css gibst du beispielsweise einen Ordner oder die einzelnen Dateien an, die zusammengefasst werden sollen. Bei gulp-usemin (das verwende ich sehr gerne), setzt du im HTML ein Kommentar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *