Wie gehen Sie es eigentlich an, wenn Sie vor einer größeren Aufgabe stehen? Arbeiten Sie einfach blindwütig drauf los, oder legen Sie sich zunächst die Werkzeuge zurecht, die Sie benötigen, um die Aufgabe erfolgreich zu meistern? Bei komplizierteren Problemstellungen werden Sie sich wohl eher für den sicheren Weg entscheiden. Sie werden erst einmal planen, also sprichwörtlich „den Werkzeugkoffer packen“. Warum? Mit durchdachten Plänen können wir Risiken minimieren und vorab präzisere Aussagen zum Projektausgang machen.
Auch bei der Programmierung von Webseiten, Webshops oder anderen digitalen Inhalten greifen wir als Programmierer und Webentwickler von Studio1® auf kleine Helfer zurück, die uns das Arbeiten erleichtern und die Basis für einen reibungslos funktionierenden Onlineauftritt schaffen. In diesem Programmier-Tutorial stelle ich ein solches System (Gulp) kurz vor und gebe eine Installationsanleitung für die wichtigsten Plugins.
Was ist Gulp?
Gulp.js ist ein Taskrunner, also ein Tool, das eine Reihe von programmierseitigen Standardaufgaben automatisch ausführt. Es verfügt über eine ganze Reihe von immer wieder benötigten Plugins, die mit wenigen Handgriffen als fertiges Paket heruntergeladen werden können. Der Vorteil: Mit Tools wie Gulp vermeiden wir es, die immer gleichen Standardaufgaben in der Programmierarbeit per Hand zu erledigen, was natürlich von vornherein Fehlerquellen ausschließt. Durch die Installation einzelner Gulp-Plugins können wir außerdem nicht nur Arbeitsabläufe automatisieren, sondern auch Webinhalte optimieren.
Was kann Gulp?
Gulp erledigt völlig eigenständig wiederkehrende Aufgaben, überwacht zum Beispiel ständig Dateien auf mögliche Änderungen, optimiert Bilder fürs Web oder fasst Skripte zusammen. Es ist einfacher zu programmieren als sein Konkurrent Grunt, arbeitet schneller und ist übersichtlicher. Achtung: Bevor man mit Gulp arbeiten kann, muss zunächst Node.js installiert werden (gibt’s für Windows, Mac und Linux unter nodejs.org/download/).
Projektvorbereitung und Installation von Gulp
Als erstes legen wir uns einen Projektordner an, den wir src nennen. Darin werden alle Dateien und Unterordner angelegt. In diesem Beispiel wären das die Unterordner assets mit den Sass-Dateien und die index.html.
Mit
npm install gulp -g
installieren wir nun Gulp auf dem Rechner. Im nächsten Schritt wird die npm init ausgeführt und damit die package.json angelegt. In dieser notiert der Packetmanager automatisch, welche Version der Module und welche Module als solche installiert wurden. Mit dem Befehl:
npm install gulp --save-dev
geht es an die eigentliche Installation von Gulp innerhalb des Projekts. Dabei wird der Ordner node module angelegt und die Installation der benötigten Plugins kann beginnen. An dieser Stelle des Arbeitsprozesses wird die gulpfile.js angelegt, die später die einzelnen Tasks beinhalten wird.
Jetzt müssen sowohl Gulp selbst als auch zukünftig unsere Plugins in der Gulpfile.js registriert werden. Dazu schreiben wir folgende Zeile in die Datei:
var gulp = require('gulp');
Nun schauen wir uns die Installation einiger häufig benötigten Plugins genauer an.
Gulp-Plugin „sass“
Gulp verfügt über Plugins für alle gängigen CSS-Präprozessoren. Da wir in diesem Tutorial mit Sass arbeiten werden, installieren wir m
npm install --save-dev gulp-sass
nun das Plugin für den Sass Präprozessor und registrieren es mit
var sass = require(‘gulp-sass‘);
in der gulpfile.js. Um nicht jede Zeile erneut mit var beginnen zu müssen, können auch einfach alle Plugins über ein Komma nacheinander definiert werden. Nun schreiben wir unseren ersten Task in die gulpfile.js:
gulp.task('sass', function(){
gulp.src('src/assets/stylesheets/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/assets/stylesheets/'));
});
Schritt-für-Schritt-Erklärung der einzelnen Zeilen:
gulp.task(sass, function () {
Hier wird der Task angelegt, den wir sass nennen.
gulp.src('src/assets/stylesheets/*.scss')
Diese Zeile zeigt Gulp den Speicherort der Datei an, mit der etwas geschehen so
.pipe(sass())
Hier fällt der Startschuss für die eigentliche Arbeit des Plugins. Wie in der var gulp angegeben, ruft Sass nun das Plugin gulp-sass auf und aus der sass-Datei wird eine .css-Datei erzeugt.
.pipe(gulp.dest('src/assets/stylesheets/'));
Zum Abschluss wird die verarbeitete Datei noch an ihren Zielort geschrieben und der Task ist abgearbeitet.
Dazu zwei ergänzende Hinweise. Gerade bei zusammengefügten Stylesheets oder Scriptdateien bietet es sich an, eine Sourcemap anzulegen, da so der Ursprung einer CSS Regel/Javascriptfunktion in den Entwicklerwerkzeugen von Firefox, Chrome usw. erhalten bleibt. Warum? Haben wir beispielsweise eine bestimmte Schriftfarbe in einer eigens dafür vorgesehen color.scss definiert und schauen uns nach dem Kompilieren und Zusammenfügen die CSS Regel im Inspektor von Firefox an, wird uns dort die entsprechende Quelldatei mit angezeigt. Das bedeutet: Kein langes Suchen mehr bei nachträglichen Änderungen. Hinweis Nr.2 betrifft das Kompilieren. Damit wir nicht nach jedem Speichervorgang den Task „sass“ ausführen müssen, empfiehlt es sich, Gulp watch zu nutzen. Damit weisen wir Gulp an, die Sass-Dateien zu überwachen und bei Änderungen den Task automatisch auszuführen:
gulp.task('watch', function(){
gulp.watch('src/assets/stylesheets/**/*.scss', ['sass']);
});
In unserem Beispiel war es das auch schon mit den Automatisierungen, die während der Entwicklung benötigt werden. Wir können also mit den Abschlussarbeiten beginnen.
Gulp-Plugin „minify“ (für HTML und CSS)
Um Skripte und CSS zu minifizieren greifen wir nun auf eine Sammlung von Gulp-Plugins zurück. Mit den Befehlen
npm install gulp-minify-html--save-dev
npm install gulp-minify-css --save-dev
werden sie installiert und müssen nur noch wie oben beschrieben in der gulpfile.js registriert werden.
Unsere Beispielseite ist nun entwicklungsseitig fertiggestellt und soll für den Livegang vorbereitet werden. Nun kommen besagte Minifier ins Spiel. Einmal für die css-Datei:
gulp.task('css-min', function(){
gulp.src('src/assets/stylesheets/*.css')
.pipe(minifycss())
.pipe(gulp.dest('final/assets/stylesheets/'));
});
Und für die html-Datei:
gulp.task('html-min', function(){
gulp.src('src/**/*.html')
.pipe(minifyhtml())
.pipe(gulp.dest('final/'));
});
Bei der Ausführung der Tasks nimmt sich Gulp sämtliche Dateien vor, entfernt alle Leerzeichen und Zeilenumbrüche und schiebt sie in den Ordner final (inklusive der Struktur).
Gulp-Plugin „imagemin“
Nun kümmern wir uns um die Speicherplatzfresser Nr.1 – die Bilder. Die Funktion des Plugins imagemin ist schnell erklärt. Es optimiert Bilder fürs Web. Imagemin (npm install --save-dev gulp-imagemin
gulp.task('images', function() {
gulp.src('src/assets/images/**/*')
.pipe(imagemin())
.pipe(gulp.dest('final/assets/images/'));
});
Die weboptimierten Bilder wandern nun ebenfalls in den Ordner final. Damit all das auch schnell und in einem Rutsch passieren kann und wir nicht jeden Befehl einzeln eingeben müssen, führen wir nun die einzelnen Tasks zusammen:
gulp.task('deployment',['css-min','html-min','images']);
Mit diesem Prozess werden die beiden minifier und die Bildoptimierung zusammengefasst. Sobald wir gulp deployment in die console eingeben, erledigt Gulp alle weiteren Arbeiten für uns. Sekunden später liegt unsere Beispiel-Webseite unterhalb des Ordners final ab.
Fazit: Warum Gulp Plugins?
Die Installation der einzelnen Plugins von Gulp macht natürlich am Anfang ein bisschen Arbeit. Aber die Vorteile sind nicht von der Hand zu weisen. Ladezeiten werden verkürzt und eine professionelle Basis für die weitere Arbeit geschaffen, denn sind die Tasks einmal angelegt, stehen sie mit einem kurzen Befehl jederzeit wieder zur Verfügung – auch in zukünftigen Projekten.
Ein Tipp zum Schluss: Mit der Installation des Gulp-Plugins „browsersync“ können wir uns das ewige Aktualisieren nach Änderungen endgültig sparen. Denn damit lädt die Seite nach jedem Handgriff automatisch neu, Änderungen sehen wir also in Echtzeit, ohne per Hand zu aktualisieren. Eine Arbeitserleichterung, die in der Summe wirklich Zeit spart und die Nerven schont.
Unser Profi der Woche: Frank Skarupa, Programmierer