Gulp

Siehe auch NodeJS

http://gulpjs.com/ http://magazin.phlow.de/webdesign/gulp/ https://www.liechtenecker.at/front-end-workflow-mit-gulp/ Ein weiteres Tool das unter Node.js läuft ist Gulp. Gulp ist ein Taskrunner (wie auch Grunt) und dient vor allem zu folgendem. 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

Wir installieren Global, damit es für alle Nutzer bereitsteht. Statt --global kann man auch die Kurzform -g als Parameter nehmen.

$ npm install --global gulp

Projekt mit Gulp starten

Aus: http://www.holgerkoenemann.de/gulp-basics-ein-einsteiger-tutorial/ (2016-09)

• In den Projektordner wechseln

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.