Gulp

Aus Wikizone
Wechseln zu: Navigation, Suche

Siehe auch NodeJS, npm

Links[Bearbeiten]

Einführung[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Zusammenfassung[Bearbeiten]

  • Projektordner erstellen in Terminal in den Ordner wechseln.
  • package.json für npm erstellen (npm init)
  • gulpfile.js erstellen
  • Benötigte Libraries laden und includen (z.B. Terminal: install --save-dev gulp, gulpfile.js var gulp = require('gulp');
  • Task in gulpfile.js anlegen
  • Alle Aufgaben anlegen und durch die Pipe schieben (Streamen).

Projekt Beispiel[Bearbeiten]

Projekt Ordner erstellen und in den Projektordner wechseln 

mkdir project
cd project

Ein npm Projekt (gulp setzt ja auf npm auf) 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.

Gulp in lokalem Projektordner installieren und Abhängigkeit in package.json eintragen. 

$ 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 und ersten Task anlegen Im Projektordner die Datei gulpfile.js erzeugen. 

touch gulpfile.js

Darin wird der default Task angelegt. 

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 und über die Variable (bzw. das Objekt) gulp gelegt. Mit gulp.task... wird ein erster Task mit dem Namen „default“ definiert. Diese macht noch rein gar nichts.

Ausführen 

gulp default

Führt den Task aus. Der default Task kann auch mit gulp (ohne default) gestartet werden. Andere Namen müssen immer mit angegeben werden. Es können natürlich auch mehrere Tasks angegeben werden.

Ein Beispiel Task – SASS Datein in CSS kompilieren[Bearbeiten]

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, bzw. die darin enthaltene Funktion sass().

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

ausführt wird, werden die .scss Dateien kompiliert und als .css Dateien im Ordner „/css/“ ausgegeben.

Beispiel - JavaScript Files zusammenfassen und minimieren[Bearbeiten]

gulpfile.js 

// Alle Module die wir benötigen werden in eine Variable geladen
var gulp = require('gulp');
var gulputil = require('gulp-util');
var concat = require('gulp-concat');
var minify = require('gulp-uglify');

gulp.task('scripts',function(){
  // concat js
  gulp.src('js/lib/*.js')
  .pipe(concat('main.min.js')) //pipe it in concat and make file
  .pipe(minify()) //pipe this through uglify (minify)
  .pipe(gulp.dest('js/min')); // and send it to destination folder
});

gulp.task('default',function(){
	
});

Erklärung

Die Module (gulp, gulp-util...) müssen wie oben erklärt alle über npm install eingebunden werden. Im Task 'scripts' werden alle .js Dateien in js/lib Zusammengefasst und minified. Die fertige Datei kommt dann in den Ordner der mit gulp.dest definiert wird: js/min. Der default Task macht eigentlich gar nichts ;-)

Tipps und Tricks[Bearbeiten]

gulp

Sucht die default Funktion und führt sie aus (Shortcut für gulp default).

Dependend Tasks[Bearbeiten]

Normalerweise werden alle Task nacheinander gestartet aber der nachfolgende Task wartet nicht bis ein vorher gestarteter beendet ist. Wenn ein Task auf einen anderen Warten soll, muß man ihm eine Abhängigkeit mitgeben. Außerdem muß der vorige Task über eine Callback Funktion bescheid geben wenn er fertig ist.

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Gulp&oldid=21785“