Webentwicklung
Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren

Mit Gulp.js automatisiert man Prozesse. Ob Minifizierung von Javascript, CSS und HTML, verlustlose Optimierung von Bildern oder z.B. die Kompilierung von Sass-Dateien: Gulp erledigt diese Prozesse in einem Rutsch, überwacht Veränderungen und revolutioniert die eigene Webentwicklung." meta_description: “Mit Gulp.js automatisiert man Webdesign-Prozesse, wie die Minifizierung von Javascript, CSS und HTML oder optimiert verlustlos Bilder. Eine Anleitung.

Obendrein operiert Gulp schneller als Grunt und ist leichter zu programmieren. Eine ausführliche Anleitung für den Taskrunner und das Building Tool Gulp.

Wie funktioniert das Building Tool Gulp.js?

[Gulp.js][11] ist ein so genannter Task Runner basierend auf Node.js. Verglichen mit seinem Verwandten Grunt, lässt sich Gulp verständlicher und schlanker programmieren. Vor allem liegt das am Konzept der Ströme, bzw. »Streams«.

Denn Aufgaben leitet man bei Gulp durch Kanäle, die »Pipes« – siehe Abbildung. Das hilft beim logischen Aufbau eines Arbeitsablaufes (Task) und beschleunigt den Prozess. Im Vergleich mit Grunt erledigt Gulp die gleiche Arbeit schneller, da nicht nach jedem Arbeitsprozess ein Schreibprozess notwendig ist. Dieser erfolgt erst bei Beendigung des Prozesses oder, wenn er ausdrücklich gewollt ist.

Außerdem arbeitet Gulp asynchron und arbeitet gleichzeit mehrere Aufgaben ab. Ein weiteres zugrundliegendes Konzept sind »einfache Plugins«. Gulp-Plugins werden für eine Aufgabe designt, nicht für mehrere. Grundlegende Funktionen, z.B. die Überwachung von Prozessen, sind in Gulp bereits implementiert.

Unter asynchroner Kommunikation versteht man in der Informatik und Netzwerktechnik einen Modus der Kommunikation, bei dem das Senden und Empfangen von Daten zeitlich versetzt und ohne Blockieren des Prozesses durch bspw. Warten auf die Antwort des Empfängers (wie bei synchroner Kommunikation der Fall) stattfindet. WikiPedia

Vorteile von Gulp.js in einer Nussschale

Schneller dank dem Konzept der asynchronen »Streams«
Einfacher zu programmieren
Übersichtlichere Konfigurationsdateien

Tutorial–Zielsetzung: Was Gulp für uns erledigen soll

In diesem Tutorial soll Gulp in einem Rutsch für unsere mehrere Aufgaben abarbeiten. Dazu gehören die folgenden:

Bilder – Verlustlose Kompression aller Bilder und Vektoren mit gulp-imagemin
HTML – Minifizierung von mit gulp-minify-html
Javascript
- Überprüfung mit gulp-jshint
- Zusammenfassen Javascripte mit gulp-concat
- Minifizierung Javascripts mit gulp-uglify
CSS
- Konvertierung der Sass-Datei in eine CSS-Datei mit gulp-sass
- Autoprefixer, um alle Vendor Prefixes zu überprüfen mit gulp-autoprefixer
- Minifizierung der CSS-Datei mit gulp-minify-css
Kopieren aller Dateien in einen Ordner für den Upload
Überwachung von Dateien auf mögliche Änderungen

Gulp installieren

Bevor man mit Gulp arbeiten kann, muss man zuerst Node.js installieren. Node.js kann man für Windows, Mac und Linux unter nodejs.org/download/ herunterladen.

#1 Node.js installieren

Node.js can be downloaded for Windows, Mac and Linux at nodejs.org/download/. You can also install it from the command line using a package manager.

Nach der Installation testet man sowohl Node.js als auch den dazugehörigen Paketmanager über das Terminal, um zu prüfen, ob die Installation erfolgreich war.

Mit…

node -v

…testet man, ob Node.js installiert ist und erhält die aktuelle Versionsnummer. Den Paketmanager überprüft man anschließend mit:

npm -v

#2 Gulp installieren

Arbeiten beide Prozesse, installiert man Gulp mit dem folgenden Befehl:

npm install gulp -g

Der Parameter -g ist wichtig, um Gulp global auf dem System zu installieren. Auf Mac oder Linux-Rechnern kann es sein, dass man als Admin erst einmal ein Passwort für die Installation eingeben muss. Das erledigt man mit sudo. Wer sich nicht so gut mit dem Terminal auf dem Mac auskennt, der findet weitere hilfreiche Tipps in meinem Terminal-Artikel

node -v

Ob und welche Version von Gulp installiert ist, erfährt man über…

gulp -v

#3 Initialzündung für das erste Projekt

Für diese Anleitung legen wir einen Ordner namens foundation an und springen in den Ordner. In diesem Ordner liegen sämtliche Dateien wie HTML, CSS, Javascripte, Bilder und Sass-Dateien des Beispielprojektes. Damit man Gulp nutzen kann, muss man es im nächsten Schritt lokal installieren.

Zuvor legen wir noch eine package.json-Datei an. In dieser notiert der Packetmanager automatisch, welche Version der Module und welche Module installiert wurden. Die package.json-Datei ist nicht für den Betrieb notwendig, ist aber schnell über npm init oder echo '{}' > package.json angelegt. Anschließend installiert man Gulp. Und so sehen die Befehle dann aus:

npm init

npm install gulp –save-dev

Jetzt muss man nur noch die Steuerungsdatei gulpfile.js für Gulp anlegen. In diese Datei tippt man sämtliche Aufgaben, die das Building Tool für uns erledigen soll.

Gulp Plugins installieren

Plugins installiert man über den Befehl npm install plugin-name --save-dev. Der Parameter --save-dev befiehlt dem Paketmanager das Paket herunterzuladen und in package.json zu notieren.

Für dieses Tutorial installieren wir die folgenden Plugins.

npm install gulp-imagemin –save-dev

npm install gulp-changed –save-dev

npm install gulp-minify-html –save-dev

npm install gulp-jshint –save-dev

npm install gulp-concat

npm install gulp-uglify –save-dev

npm install gulp-sass

npm install gulp-autoprefixer –save-dev

npm install gulp-minify-css –save-dev

Anstelle jeden Befehl einzeln einzugeben, kann man sämtliche Plugins auch über einen Befehl installieren. Dazu reiht man die Namen einfach aneinander. Der folgende Befehl installiert drei Plugins nacheinander in einem Rutsch und notiert sie in package.json.

npm install gulp-imagemin gulp-uglify gulp-minify-css –save-dev

Gulp samt Plugins in gulpfile.js einbauen

Hat man die Plugins installiert – man kann weitere später nachrüsten –, öffnet man als nächstes gulpfile.js. Dort registriert man jetzt sämtliche benötigten Plugins und zuallererst natürlich Glulp selbst. Das geschieht mit…

// gulp.js einbauen
var gulp = require('gulp');

Im nächsten Schritt baut man die Plugins ein. Um nicht jede Zeile mit var zu beginnen, kann man auch alle Plugins über ein Komma nacheinander definieren. Nur zum Schluss darf man das Semikolon nicht vergessen.

// Plugins einbauen
var changed = require('gulp-changed'),
    jshint = require ('gulp-jshint'),
    concat = require ('gulp-concat'),
    uglify = require ('gulp-uglify'),
    rename = require('gulp-rename'),
    imagemin = require ('gulp-imagemin'),
    clean = require('gulp-clean'),
    minifyhtml = require ('gulp-minify-html'),
    autoprefixer = require ('gulp-autoprefixer'),
    minifyCSS = require ('gulp-minify-css');

Komprimieren von Bildern und Vektorgrafiken – PNG, SVG, JPG, GIF

Zur einfachsten und oft auch wirkungsvollsten Methode die eigene Website zu beschleunigen, gehört die Optimierung von Bildern. Diese Aufgabe übernimmt das Plugin imagemin. Damit die Bilder nicht immer und immer wieder erneut optimiert werden, nutzen wir ein weiteres Plugin, dass die bereits getätigten Änderungen überwacht: gulp-changed.

Und so sieht dann der Task aus:

// Komprimiere Bilder
gulp.task('images', function() {
  var imgSrc = './src/images/**/*',
      imgDst = './build/images';

  gulp.src(imgSrc)
    .pipe(changed(imgDst))
    .pipe(imagemin())
    .pipe(gulp.dest(imgDst));
});

In der ersten Zeile definiert man die Aufgabe und benennt sie, hier images. Die darauffolgenden Zeilen definieren zwei Variablen, mit denen man das Quellverzeichnis imgSrc der noch nicht optimierten Bilder definiert und das Zielverzeichnis imgDst, in welches Gulp die optimierten Bilder speichern soll.

Mit gulp.src(imgSrc) startet man den Task und übergibt das in Variable imgSrc festgelegte Verzeichnis. Anschließend befiehlt man mit changed nur neue Dateien zu komprimieren, das spart Zeit. Im nächsten Schritt schleust man endlich die Bilder mit .pipe(imagemin()) durch das Plugin. Ganz wichtig ist der letzte Befehl .pipe(gulp.dest(imgDst)). Ohne gulp.dest werden die Bilder zwar optimiert, aber nicht abgespeichert. Denn das erledigt Gulp erst mit der letzten Zeile.

Jetzt speichert man gulpfile.js ab und startet die Aufgabe über die Konsole mit gulp + Name der Aufgabe, also:

gulp images

Jetzt sollte Gulp nach Bildern im Quellverzeichnis ./src/images/**/* suchen, bearbeiten und im Zielverzeichnis ./build/images speichern. Damit auch alle Bilddateien erwischt werden, befehlen wir Gulp mit dem Sternchen * sämtliche Dateien zu bearbeiten. Mit *.jpg würden wir z.B. nur die JPG-Dateien aussuchen.

Damit Gulp auch Bilder in Unterverzeichnissen von src/images/ berüchsichtigt, kommt noch ein Parameter dazu, die zwei Sternchen **. Damit krabbelt Gulp auch durch alle Unterverzeichnisse.

Mehr zu den beiden benutzten Plugins findet man unter:

gulp-imagemin: https://www.npmjs.org/package/gulp-imagemin; https://github.com/sindresorhus/gulp-imagemin
gulp-changed: https://www.npmjs.org/package/gulp-changed; https://github.com/sindresorhus/gulp-changed

Grundlegende Links

Hilfreiche Gulp-Plugins

Gulp FTP

Mit gulp-ftp lädt man Dateien hoch. Kombiniert man gulp-ftp mit der watch-Funktion so befiehlt man Gulp die Überwachung von Dateien und Ordnern und initiert bei einer neuen Datei einen automatischen Upload. Dahingegen lassen sich mit dem Plugin jedoch keine Dateien können per FTP löschen. löschen. Eine Alternative ist evtl. rsync. Mehr dazu im Artikel »Deploying via rsync with Gulp«

https://github.com/sindresorhus/gulp-ftp

Gulp Tutorials (Text)

Deutsche Tutorials

Front-end Workflow mit Gulp

Englische Tutorials

Mark Goodyear: »Getting started with gulp«
Sitepoint: »An Introduction to Gulp.js«
Smashing Magazine: »Building With Gulp«
Julien Renaux: »Introduction to Gulp.js with practical examples«
Justin McCandless: »A Tutorial for Getting Started with Gulp«
9 gulp.js plugins for a great build system
Deploying via rsync with Gulp

Gulp Video Tutorials

LevelUpTuts – Learning Gulp

Die LevelUpTuts-Videoanleitungen holen auch Anfänger mit grundlegenden Webdesign-Kenntnissen ab. Diese Tutorial-Serie war für mich die Initialzündung, um mich mit Gulp auseinanderzusetzen.

Gulp Tutorials von Maximilian Schmitt

Diese Serie ist für Fortgeschrittene und Kenner von Javascript und Node.js geeignet.

Grunt.js vs. Gulp.js – Interview mit Stefan Baumgartner

Gulp Rezepte

Bilder optimieren mit Gulp

Bei der Bildkompression hilft Gulp und automatisiert die lästige, aber äußerst wichtige Bildkompression. Ob verlustlose Kompression oder verlustbehaftete Kompression: Für jedes Bildformat setzt Gulp auf die etablierten freien Bibliotheken zurück.teaser: “Bei der Bildkompression hilft Gulp und automatisiert die lästige, aber äußerst wichtige Bildkompression. Ob verlustlose Kompression oder verlustbehaftete Kompression: Für jedes Bildformat setzt Gulp auf die etablierten freien Bibliotheken zurück.”

Für die Optimierung von PNG-, JPG-, SVG- und GIF-Dateien stehen verschiedene freie Bibliotheken zur Verfügung. Dazu gehören pngquant, OptiPNG, JpegOptim oder Scour.

// 
// Gulp.js
// 
// 1. Create package.json › $ echo "{}" > package.json
// 2. Create gulpfile.js › $ touch gulpfile.js
// 3. Install Gulp-Plugins › $ npm install gulp gulp-changed gulp-rename gulp-image-resize gulp-imagemin --save-dev
// 

// gulp.js einbauen
var gulp = require('gulp'); 

// Plugins einbauen
var changed = require('gulp-changed'),
        rename = require('gulp-rename'),
        imageResize = require('gulp-image-resize'),
        imagemin = require ('gulp-imagemin');


// Pfade festlegen
var imgSrc = './originals/**/*',
        imgDst = './optimized/';


// Watch images files and resize and optimize
gulp.task('images', function() {
    console.log('\n---\n\n Watching Images, Optimizing Images \n\n---\n') 
    gulp.watch(imgSrc, ['thumb', 'imagemin']);
});

// Bilder und Vektoren minifizieren
gulp.task('imagemin', function() {
    gulp.src(imgSrc)
        .pipe(changed(imgDst))
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});

gulp.task('thumb', function () {
    gulp.src(imgSrc)
        .pipe(imageResize({ 
            width : 500,
            height : 281,
            crop : true,
            upscale : false,
            imageMagick: true
        }))
        .pipe(imagemin())
        .pipe(rename({suffix: '-thumb'}))
        .pipe(gulp.dest(imgDst));
});

gulp.task('large', function () {
    gulp.src(imgSrc)
        .pipe(imageResize({ 
            width : 1000,
            height : 700,
            crop : true,
            upscale : false,
            imageMagick: true
        }))
        .pipe(imagemin())
        .pipe(rename({suffix: '-large'}))
        .pipe(gulp.dest(imgDst));
});

‹ Hilfreiche Links für … OPML – Was ist das? ›