Schnellerer Arbeitsablauf mit Gulp auf Windows

Almut M. Logo
T. Gorenflo

"Unsere Zufriedenheit spiegelt sich auch darin wieder, dass wir schon die zweite Website von Frau Müller realisieren lassen.
Auch außerhalb unseres Geschäftsinteresses kann ich Frau Müller guten Gewissens empfehlen."

Tim Gorenflo, Altenhilfezentrum St. Laurentius

2016-09-06 von Almut

Automatisiere Deinen Webdesign Workflow mit Gulp

Um was geht es in diesem Beitrag:

Der Beitrag richtet sich an Webdesigner, die Ihren Arbeitsablauf automatisieren und den Taskrunner Gulp auf Windows ausprobieren möchten. Fragen wie "Was ist ein Taskrunner und wie installiere ich Gulp unter Windows?" werden beantwortet. Es wird ein Gulpfile vorgestellt, das SCSS in CSS umwandelt, CSS-Regeln prefixed und die so erstellte CSS-Datei automatisch auf den Server lädt.

Wozu ein Taskrunner?
Gulp auf Windows installieren
Schritt 1: Node & npm installieren
Schritt 2: Gulp global installieren
Optional: Schritt 2a: Die package.json Datei
Schritt 3: Gulp lokal installieren
Erforderliche Module installieren, um SCSS in CSS umzuwandeln + Autoprefixer
Ein gulpfile.js anlegen
Let's start the magic: Erster Test
Änderungen automatisch erkennen: Watcher
Autoprefixer nutzen
FTP-Uplod mit gulp vinyl-ftp
Alle Tasks automatisch ausführen

gulp logo

Wozu ein Taskrunner?

Wenn Du wiederkehrende Arbeitsabläufe bei der Umsetzung einer Website beschleunigen willst, sind Taskrunner wie Grunt oder Gulp sehr hilfreich. Sie basieren auf Javascript und vereinfachen einem Webdesigner das Leben erheblich, da sie wiederkehrende Arbeitsabläufe praktisch auf Knopfdruck und in Sekunden erledigen.

Wie zum Beispiel SCSS in CSS kompilieren, Browser Prefixe in CSS-Regeln einfügen, mehrere Javascript-Dateien zu einer einzelnen zusammenknüpfen oder Bilder herunter rechnen. Auch Dateien per FTP auf den Server zu laden, lässt sich mithilfe eines Taskrunners automatisieren.

Sehr hilfreich ist dabei, dass man sich die abzuarbeitenden Aufgaben (Tasks) in einem sogenannten gulpfile zusammenstellt (grundlegende JS-Kenntnisse vorausgesetzt) und diese einmal so eingerichteten „Arbeitsanweisungen“ für viele Projekte immer wieder verwenden kann.

Ist also die erste Hürde der Installation und des „Tasks-zusammenstellens“ geschafft, zahlt sich der Aufwand mit jedem neuen Projekt in Form eines beschleunigten Arbeitsablaufs aus.

Gulp auf Windows installieren

Um Gulp auf Windows zu installieren, benötigt man npm.

npm ist eine Paketverwaltung für nützliche Module und Erweiterungen, die auf Javascript basieren. Was Composer für PHP ist, das ist npm für Javascript.
Da npm bei der Installation auf Windows manchmal oft Probleme macht, ist es besser, sich gleich node.js zu installieren. Denn npm ist in node bereits enthalten.

Schritt 1: Node & npm installieren

Gehe zur node Website https://nodejs.org, lade Dir die LTS Version herunter und führe dann den Installer aus. Folge den Anweisungen des Installers.

Prüfe jetzt, ob die Installation geklappt hat. Öffne dazu die Eingabeaufforderung (Kommandozeile) und schreibe

node -v

Bestätige mit enter. Es sollte Dir eine Versionsnummer von node zurückgegeben werden, wie z. Bsp.

V4.5.0

Das bedeutet, node.js wurde erfolgreich installiert.

Sollte die Antwort sein, dass der Befehl „node“ nicht erkannt wurde („Node is not recognized as an external or internal command“) versuche zunächst einen Neustart und gib den Befehl node -v danach nochmals ein.

Schritt 2: Gulp global installieren

Gib nun in der Eingabeaufforderung folgendes ein:

npm install --global gulp-cli

Damit installierst Du Dir gulp-cli global. Es ist ein Hilfsprogramm, um Gulp von der Eingabeaufforderung aus zu nutzen. Es ermöglicht auch später, verschiedene Versionen von Gulp in verschiedenen Projekten zu nutzen.
Du musst manchmal etwas Geduld haben, bis alles installiert ist.

Schritt 2a (optional): Die package.json Datei

Diesen Schritt habe ich als optional markiert, da die package.json Datei für das Funktionieren unseres Projekts nicht unbedingt notwendig ist.

Wozu eine package.json

Ein package.json Datei wird erst dann sehr nützlich, wenn Du mit anderen an einem Projekt zusammenarbeitest und diese zum Beispiel dasselbe gulpfile mit denselben Modulen und Abhängigkeiten darin verwenden sollen.

Auch wenn Du selbst die in diesem Beitrag vorgestellten Gulp-Tasks auch für andere Projekte immer wieder anwenden möchtest, ist es praktisch eine package.json-Datei zu haben.

In der package.json stehen sämtliche für Dein Projekt erforderlichen Module und Abhängigkeiten drin, die installiert werden müssen — praktisch eine Art Liste mit "benötigten Werkzeugen".

Du musst also nicht für jedes neue Projekt nochmals alle npm Module erneut einzeln installieren oder gar versuchen einen Projektordner mitsamt dem "node_modules" Ordner darin zu kopieren. (Das wird auf Windows nicht funktionieren, da die darin enthaltenen Ordner zu tief verschachtelt sind, als das Windows sie noch kopieren könnte.)

Es reicht dann für zukünftige Projekte, die package.json in den gewünschten Projektordner ins Rootverzeichnis zu legen, die Eingabeaufforderung zu öffnen und

npm install

einzugeben.

npm installiert dann alles in einem Rutsch und legt den node_modules Ordner mit allen erforderlichen Modulen an. Du musst Dir dann nur noch das gulpfile in Deinen Ordner ins Rootverzeichnis legen.

Wenn Du also gleich mit dem Anlegen einer package.json loslegen willst, führe den folgenden Befehl in Deinem Projektordner aus. Wenn Du Dir erstmal anschauen willst, wie Gulp überhaupt funktioniert, kannst Du direkt bei "Schritt 3: Gulp lokal installieren" weitermachen.

Eine package.json anlegen

Zum ersten Anlegen einer packge.json schreibe in Deinem Projektordner den Befehl

npm init

in der Eingabeufforderung. Dann fragt Dich npm einige Dinge zu Deinem Projekt ab.
Du kannst immer bestätigen, da diese Eingaben für unseren Zweck nicht so wichtig sind.

Schritt 3: Gulp lokal installieren

Erstelle Dir nun einen Projektordner an einem Ort Deiner Wahl auf Deinem Rechner. Meiner heißt „Gulpprojekt“. Der Name spielt aber keine Rolle.

Erstelle darin nun einen Ordner namens „styles“ und darin wiederum zwei Ordner „scss“ und „css“.
Dein Projektordner sollte wie folgt strukturiert sein:

projektordner Schritt 1

Gehe nun in Deinen Projektordner und öffne dort die Eingabeaufforderung im Projektordner.
Das geht recht schnell mit SHIFT + „Rechtsklick“ > „Eingabeaufforderung hier öffnen“.

Schreibe jetzt den Befehl

npm install gulp --save-dev

und bestätige mit enter.

(Sollten „npm WARN deprecated“ Hinweise während der Installation auftreten, sieh' großzügig darüber hinweg. Das soll uns zunächst nicht stören.)

Du wirst bemerken, dass mit der Installation in Deinem Projektordner nun automatisch ein Ordner „node_modules“ angelegt wurde. Da werden nun alle Module hinein gesichert, die Du Dir per npm für dieses Projekt installierst.

Dein Projektordner sieht nun so aus:

Projektordner mit node modules

Nachdem Du nun Gulp fertig installiert hast, kannst du Dir als nächstes die für Deine Zwecke benötigten Module installieren.

Merken

Merken

Erforderliche Module installieren

Wir wollen zunächst SASS in CSS umwandeln, und zwar immer dann, wenn sich eine SCSS-Datei geändert hat. Ausserdem wollen wir die so generierte CSS-Datei autoprefixen. Dazu gibt’s bei npm die Module „gulp-sass“ und „gulp-autoprefixer“, die wir nun installieren werden.

Schreibe folgende Befehle in die Eingabeaufforderung (welche in Deinem Projektordner geöffnet ist) um das Modul „gulp-sass“ zu installieren :

npm install gulp-sass -–save-dev

Und das Autoprefixer Modul wird wie folgt installiert:

npm install gulp-autoprefixer -–save-dev

Ein gulpfile.js anlegen

Jetzt brauchen wir ein sogenanntes gulpfile.js (Kleinschreibung beachten! Es soll genau so heissen.). Das ist die Steuerungsdatei in der die Tasks und Abläufe eingestellt werden können.

Lege also eine Datei gulpfile.js direkt in Deinem Projektordner an und kopiere folgenden Code hinein:

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

gulp.task('sass', function(){
    return gulp.src('styles/scss/**/*.scss') // Find any scss file in any subdirectory in the file styles/scss
        .pipe(sass()) // Converts Sass to CSS with gulp-sass
        .pipe(gulp.dest('styles/css'))
});
//Watch for file changes gulp.task('watch', function(){ gulp.watch('styles/scss/**/*.scss', ['sass']); // watch for scss file changes, then compile to css gulp.watch('styles/css/*.css', ['default']); //watch for css file changes, then do defaulttask (=autoprefix it) // maybe other watchers here });
gulp.task('default', ['sass'],function () { // do default task but 'sass' task has to be done first! return gulp.src('styles/css/*.css') //take any .css and autoprefix it and put to dist folder .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('dist/css')); });

Achtung: Hier sind einige Pfadangaben im Code zu Ordnern, die in Deinem Projekt genauso angelegt sein sollten, damit dieser Code nachher auch funktionieren kann (s. Projektbeispielordner weiter oben).

Die Vorbereitungen sind erledigt.

Nun brauchen wir eine SCSS-Datei mit ein bisschen SASS drin zum umwandeln. Lege diese in den „styles“ > „scss“ Ordner. Ich nehme an, Du hast schon öfters mit SASS/SCSS gearbeitet. Falls nicht, hier ist ein sehr simpler SCSS-Code zum Umwandeln.

Kopiere diesen in eine SCSS-Datei, zum Beispiel in „simple.scss“:

$grey: #E7E8E3;
$blue: #4DC1F6;

h1 {
color: $grey;
}

h2 {
color: $blue;
}

Let's start the magic

Öffne die Eingabeaufforderung in Deinem Projektordner.

Wenn Du nun den Befehl

gulp

schreibst, werden alle SCSS-Dateien im SCSS-Ordner in CSS umgewandelt und in den CSS-Ordner als CSS-Datei gesichert.

Das sieht so aus:

Gulp Befehlseingabe

Änderungen automatisch erkennen

Um nun nicht nach jeder kleinen Änderung im SCSS-Code „gulp“ in die Eingabeaufforderung tippen zu müssen, nutzen wir den watcher, der unseren SCSS-Code auf Änderungen überwacht.

Dazu öffnen wir ein zweites Eingabeaufforderungsfenster im Projektordner und schreiben folgenden Befehl:

gulp watch

gulp watch

Dadurch werden alle .scss Dateien im scss-Ordner nun auf Änderungen überwacht.

Ändere nun z. Bsp. einen Farbcode in Deiner SCSS-Datei und sichere.
Hole dann die Eingabeaufforderung mit dem laufenden „Watcher-Task“ nach vorne und sieh', wie die Änderungen automatisch erkannt und verarbeitet werden.

(Wenn Du den Watcher beenden möchtest, schließe dieses Eingabeaufforderungsfenster mit
Strg – C und dann mit „J“ (Ja) bestätigen.)

Autoprefixer

Wir wollen nun auch den Autoprefixer-Part des gulpfiles ausprobieren und fügen deshalb noch ein bisschen mehr Code in die SCSS-Datei. Dazu eignet sich Flexbox Code, der ja auf jedenfall noch „prefixed“ werden muss, wenn er in den aktuelleren Browserversionen funktionieren soll.

Kopiere zum Test den folgenden „Vanilla“ Flexbox Code in deine SCSS-Datei unten dran:

// Vanilla flexbox code for a simple flexbox container with 3 items inside without any browser prefixes
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
    }
.flex-item:nth-child(1) {
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    }
.flex-item:nth-child(2) {
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    }
.flex-item:nth-child(3) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

Speichere und gib wieder den Befehl gulp in die Eingabeaufforderung.

Wirf dann einen Blick in deinen Projektordner:

Im css/simple.css hat sich nicht so viel Neues getan. SCSS Code wurde in CSS umgewandelt. Da der Flexbox Code kein SCSS enthielt, hat er sich hier nicht verändert.

Es wurde nun aber ein Ordner „dist“ in Deinem Projektordner angelegt („dist“ für „distribution“ da Dateien in diesem Ordner letztendlich auf den Server geladen werden sollen) und darin findest Du nun die durch den Autoprefixer bearbeitete Datei.

Der Vanilla Flexbox Code wurde mit den erforderlichen Browserprefixen versehen - und zwar zurückreichend für die jeweils letzten beiden Versionen eines Browsers, genau wie im gulpfile vorgegeben wurde.

Falls Du den Autoprefixer auch „manuell“ nutzen willst:
Hier geht es zum Autoprefixer Playground: http://simevidas.jsbin.com/gufoko/quiet . Gib dort links Deine CSS Regeln ein und stelle unten ein, für welche Browser, bzw. wie viele Browserversionen Du zurück „prefixen“ möchtest.

Nun musst du nur noch die .css Datei aus dem /dist/css Ordner auf Deinen FTP Server laden.

Aber das könnte auch automatisiert werden.

Automatisch auf den FTP-Server laden mit gulp vinyl-ftp

Um die generierten Dateien automatisch per FTP auf den Server zu laden, müssen wir das gulpfile noch ein bisschen erweitern.

Wir brauchen zwei weitere Module, die diese Aufgabe erledigen:
Installiere also zunächst „vinyl-ftp“ und „gulp-util“ (ein Modul, um Logs in der Eingabeaufforderung anzuzeigen. Das dient der Übersicht, was/wann/wo passiert) mit npm:

npm install vinyl-ftp --save-dev
npm install gulp-util --save-dev

 

Nun müssen wir unser gulpfile.js wie folgt erweitern:

Bevor ein Task ein spezielles Modul aufrufen und ausführen kann, muss das Modul am Anfang des gulpfiles „required“ werden.

Füge also die zwei folgenden Zeilen an den Anfang Deines gulpfiles ein — am Besten direkt nach den anderen „require“-Angaben:

var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

Der folgende Upload-Task-Code selbst kommt dann ans Ende des Gulpfiles.
Ersetze die FTP-Zugangsdaten in der Variable „var conn“ mit Deinen eigenen FTP-Zugangsdaten:

// Deploy to FTP server task
gulp.task( 'deploy', function () {
    var conn = ftp.create( {
        host:     'myhost.de',
        user:     'myusername',
        password: 'mypassw0rd123',
        parallel: 10,
        log:      gutil.log
    } );
    var globs = 'dist/css/**';
    // Durch base = '/dist' wird nur der Inhalt von "dist" in den Ordner "files" auf dem Server geladen
    // turn off buffering in gulp.src for best performance
    return gulp.src( globs, { base: 'dist/', buffer: false } )
        .pipe( conn.newer( '/files' ) ) // only upload newer files
        .pipe( conn.dest( '/files' ) );
} );

Wenn der Ordner "files" noch nicht vorhanden ist, wird er auf dem Server duch diesen Task neu angelegt.

In der variable „var globs“ im FTP Task wird festgelegt, dass alle Dateien im Ordner dist/css hochgeladen werden sollen.

Solltest Du ausser den CSS-Dateien aus "dist" noch andere Ordner oder Dateien von Deinem Rechner lokal auf den Server hochladen wollen, kannst Du "var globs" wie folgt erweitern. Die Variable enthält dann ein Array und könnte zum Beispiel so aussehen. Vergiss dann aber nicht, die base anzupassen ( base: '.' ), so dass alle diese Ordner im Array hochgeladen werden:

var globs = [
    'pict/**',
    'pages/**',
    'dist/css/**',
    'js/**',
    'fonts/**',
    'index.html'
];



Um ein Hochladen auf den Server manuell auszulösen, gib in Deiner Eingabeaufforderung den Befehl

gulp deploy

ein.

Um zu prüfen, ob die Datei hochgeladen wurde, rufe sie über die URL in Deinem Browser auf. In einem FTP Client wie Filezilla, sind die Dateien manchmal nicht sofort sichtbar.

Das komplette Gulpfile sieht nun so aus:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

gulp.task('sass', function(){
    return gulp.src('styles/scss/**/*.scss') // Find any scss file in any subdirectory in the file styles/scss
        .pipe(sass()) // Converts Sass to CSS with gulp-sass
        .pipe(gulp.dest('styles/css'))
});

//Watch for file changes in the sass and css folder
gulp.task('watch', function(){
    gulp.watch('styles/scss/**/*.scss', ['sass']); // watch for scss file changes, then compile to css
    gulp.watch('styles/css/*.css', ['default']); //watch for css file changes, then do defaulttask (=autoprefix it)
    // maybe other watchers here
});

gulp.task('default', ['sass'],function () { // do default task but 'sass' task has to be done first!
    return gulp.src('styles/css/*.css') //take any .css filen this folder and autoprefix it and put to dist folder
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css'));
});

// Deploy to FTP server task
gulp.task( 'deploy', function () {
    var conn = ftp.create( {
        host:     'myhost.de',
        user:     'myusername',
        password: 'myPassw0rd',
        parallel: 10,
        log:      gutil.log
    } );

    var globs = 'dist/css/**';

    // Durch base = '/dist' wird nur der Inhalt von "dist" in den Ordner "files" auf dem Server geladen
    // turn off buffering in gulp.src for best performance
    return gulp.src( globs, { base: 'dist/', buffer: false } )
        .pipe( conn.newer( '/files' ) ) // only upload newer files
        .pipe( conn.dest( '/files' ) );
} );

Alle Tasks automatisch ausführen

Um nicht nach jeder kleinen Änderung den Befehl gulp deploy eintippen zu müssen, können wir einen weiteren "Watcher" in unser gulpfile einbauen, der automatisch auf den Server hoch lädt sobald sich irgendeine CSS-Datei in

dist/css/*.css

geändert hat.

Die folgende Zeile für den dritten Watcher bauen wir unter den beiden schon vorhandenen Watchern ins gulpfile ein:

 gulp.watch('dist/css/*.css', ['deploy']); //halte Ausschau nach CSS-Dateiänderungen im Ordner dist/css, und führe dann den den "deploy-Task" aus (upload to server)

Mit diesem dritten Watcher ist der Workflow nun komplett automatisch.

Wenn Du mit der Arbeit am Projekt beginnst, gehst Du zuerst in den Projektordner und öffnest dort die Eingabeaufforderung.

Dann werden mit dem Befehl

gulp watch

die Watcher gestartet. (Diese Watch Task Eingabeaufforderung bleibt solange geöffnet, wie am Projekt gearbeitet wird.)

Wenn Du jetzt Änderungen an Deinen SCSS-Dateien vornimmst, werden sie umgewandelt, prefixed und direkt auf den Server geladen.

Nur den Browser musst du noch selbst reloaden, um die Änderungen online zu begutachten. Aber auch dafür gibt es ein npm-Modul, dass Dir diese Arbeit abnehmen könnte. Es würde aber diesen Blogbeitrag sprengen.

Fazit

Ich hoffe, Du hast einen kleinen Einblick bekommen, wie Du Dir mit Gulp einige stets wiederkehrende Handgriffe beim Umsetzen einer Website erleichtern kannst. Durch Automatisierung können viele Arbeitsabläufe beschleunigt werden, die sonst in mühsamer Handarbeit erledigt werden müssten.

Um mehr ins Thema 'reinzukommen, empfiehlt es sich, viel mit dem Gulpfile herumzuspielen, kleine Änderungen auszuprobieren und neue Module hinzuzufügen. Es gibt inzwischen fast für jede lästige Fleissarbeit, die einem als Webworker über den Weg läuft, irgendein nützliches npm-Modul.

Weitere Infos zum Thema:

Gulp for Beginners (in EN)

Getting started with Gulp (in EN)

Durchstarten mit Gulp (in DE)

Gulp Grundlagen (in DE)

 

webdesigner delft

Über die Autorin
Almut arbeitet seit über 15 Jahren als freie Webdesignerin und Grafikerin und entwickelt Websites für kleine bis mittelständische Firmen - für die Mehrheit Ihrer Kunden seit vielen Jahren. Die meisten Websites realisiert sie mit dem CMS Contao. Sie liebt MOOCs, grünen Tee und radfahren und hat am 10. Januar 2015 beschlossen, sich mit der command line endgültig anzufreunden.

Wenn Dir der Beitrag weitergeholfen hat, freue ich mich sehr, wenn Du ihn in Deinem Lieblings-Socialnetwork teilst.

« A/B-Testing mit Google Analytics Videotutorials for beginners (EN) »