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

Ein Gulp Projekt benötigt eine eine package.json Datei . Man kann sie von Hand anlegen oder über npm -init eine erstellen.

$ 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. die Option --save-dev sorgt dafür dass die Abhängigkeiten (zu Gulp) in der package.json Datei aktualisiert wird.

In der package.json findet ihr dann 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.

Andere Optionen sind --save oder --save-optional, hier werden die Abhängigkeiten an anderer Stelle im .json abgelegt.

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.

Ausführen

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.