Einführung Gulp.js

Anlässlich Webdnesday 5.11.2014 in St. Gallen:
http://techup.ch/1732/webnesday-lightning-talks

Transcript

1. Gulp.js The streaming build system Thomas Jaggi, 5.11.2014, http://techup.ch/1732/webnesday-lightning-talks
2. About me Bild: http://www.tagblatt.ch/olma/7-50-fuer-die-beruehmteste-St-Gallerin;art484357,3976931
3. Weshalb ein Build- System?
4. Bild: www.abb.com
5. Automatisierung • Preprocessing von CSS • Linting • Zusammenführen von Files • Minifizierung / Optimierung • Generierung von Iconfonts, Sprites, DataURIs etc. • Precompiling von Templates • …
6. Streams? Bild: http://www.rivermap.ch/hinweise.php?id=5
7. Streams • Nicht unbedingt brandneu: 
 http://www.youtube.com/watch?v=tc4ROCJYbm0#t=6m00s
 • Idee: • Komplexe Systeme in kleine Komponenten aufsplitten, welche genau eine Aufgabe haben • Output von Komponente 1 dient als Input für Komponente 2
 • Lese-Empfehlung: Einführung in Node Streams:
 https://github.com/substack/stream-handbook https://github.com/substack/stream-handbook
8. Typischer Build-Task • Beispiel JavaScript: 1. (Tests ausführen) 2. Linting 3. Concatenation 4. Minifizierung
9. Theorie http://slides.com/contra/gulp#/9
10. Realität
 (aka Grunt today) http://slides.com/contra/gulp#/10
11. Gulp: Philosophie • Effizienz durch Verwendung von Node Streams • Verständlichkeit durch «Code over configuration» • Einfachheit durch minimale API • Qualität durch strikte Plugin-Guidelines http://gulpjs.com
12. Getting started • npm install -g gulp
 • Projekt starten: • touch gulpfile.js • npm init • npm install —save gulp
13. Struktur var gulp = require('gulp'); gulp.task('js', function() { return gulp.src('source/js/*.js') // Do things here .pipe(gulp.dest('build')); });
14. gulp.task • Definiert einen Task • Basis: https://github.com/orchestrator/orchestrator • Wird momentan überarbeitet (https://github.com/ gulpjs/gulp/issues/355)
 • Parameter • name • [deps]: andere Tasks, die vorher laufen müssen • fn: Task-Funktionalität an sich
15. gulp.src • Generiert Stream von Vinyl-Files (https:// github.com/wearefractal/vinyl-fs): • Format für virtuelles File (Pfad, Inhalt und Typ)
 • Parameter: • globs (https://github.com/isaacs/node-glob) • [opts] (siehe https://github.com/gulpjs/gulp/blob/ master/docs/API.md)
16. gulp.dest • Schreibt Files im Stream wieder ins Filesystem • Zielpfad hängt vom path Property der Vinyl-Files ab • Nicht-existierende Ordner werden generiert
 • Parameter: • path • [opts] (siehe https://github.com/gulpjs/gulp/blob/ master/docs/API.md)
17. Beispiel var gulp = require('gulp'), jshint = require('gulp-jshint'), concat = require('gulp-concat'), uglify = require('gulp-uglify'); gulp.task('js', function() { return gulp.src('source/js/*.js') // Lint .pipe(jshint()) .pipe(jshint.reporter('default')) // Concatenate .pipe(concat('main.js')) // Minify .pipe(uglify()) // Save back to file system .pipe(gulp.dest('build/js')); });
18. gulp.watch • Triggert Tasks bei Änderungen an Files • Basis: https://github.com/shama/gaze
 • Parameter: • glob • [opts] (siehe https://github.com/gulpjs/gulp/blob/ master/docs/API.md) • tasks
19. Beispiel gulp.task('watch', function() { gulp.watch('source/js/*.js', ['js']); });
20. Plugins • Kriterien: • Kein existierendes Node-Modul, welche die Aufgabe übernehmen kann • Plugin übernimmt nur eine Aufgabe
 • Details: https://github.com/gulpjs/gulp/blob/master/ docs/writing-a-plugin/guidelines.md • Blacklist: https://github.com/gulpjs/plugins/blob/master/ src/blackList.json
21. Grundaufbau var Stream = require('stream'); module.exports = function(options) { var stream = Stream.Transform({ objectMode: true }), suffix = new Buffer('console.log("hello");'); stream._transform = function(file, encoding, cb) { // Empty file / directory if (file.isNull()) { this.push(file); return cb(); } // No support for streams (yes, the irony) if (file.isStream()) { // Missing: Throw error return cb(); } // Edit file content file.contents = Buffer.concat([file.contents, suffix]); // Add file back to stream this.push(file); cb(); }; return stream; };
22. Alternative für einfache Transformationen: gulp-tap .pipe(tap(function(file) { var suffix = new Buffer('console.log("hello");'); file.contents = Buffer.concat([file.contents, suffix]); return file; }))
23. Caveats: Error handling • Problem: Tasks wie File-Watcher etc. sollen nicht bei jedem Fehler stoppen
 • Workaround: 
 • Alles wird gut: • https://github.com/gulpjs/gulp/issues/359 • https://github.com/gulpjs/gulp/issues/358
24. Caveats: gulp.watch • Neue Folder werden nicht entdeckt, Watcher muss neu gestartet werden
 • Alles wird gut: 
 https://github.com/shama/gaze/pull/103
25. Caveats: Task orchestration • Gewisse Tasks sollen parallel, andere seriell ausgeführt werden
 • Workaround: https://www.npmjs.org/package/run- sequence
 • Alles wird gut: 
 https://github.com/gulpjs/gulp/issues/355
26. Yay, node.js build system!
27. WIR KÖNNEN UNSER BUILD-SYSTEM SELBER SCHREIBEN!! IN JAVASCRIPT!!
28. Naja
29. Probleme 1. npm • Performance von "npm install" • Lösung: https://github.com/vvo/npm-pkgr
 • Mühsame Bugs: • Install mit npm-shrinkwrap.json (gefixt): https:// github.com/npm/npm/issues/6238 • Authentifizierung mit privaten Git-Repos: https:// github.com/npm/npm/issues/6637
30. Probleme 2. Dependency hell • Node und npm (allenfalls verschiedene Versionen auf verschiedenen Projekten) • Hilfe: nvm (https://github.com/creationix/nvm bzw. https://github.com/coreybutler/nvm-windows) • Ruby und Bundler für Sass (allenfalls verschiedene Versionen auf verschiedenen Projekten) • Lösung: libsass (https://github.com/sass/libsass) • Bower • Native Grafik-Libraries
31. Probleme 3. Cross platform • Build-System Voraussetzung für die Entwicklung 
 —> sollte Plattform-unabhängig sein
 • Windows: • Plugins werden zum Teil nicht getestet: https://github.com/ doctyper/gulp-modernizr/issues/6 • PhantomJS (Dependency für gewisse Grafik-Tasks) funktioniert sehr selektiv
 • Linux: Probleme mit nativen Bindings: • https://github.com/sass/node-sass/issues/467 • https://github.com/imagemin/gifsicle-bin/issues/11
32. Empfehlenswerte Ressourcen • Links:
 https://github.com/gulpjs/gulp/tree/master/docs • Getting started:
 https://github.com/gulpjs/gulp/blob/master/docs/ getting-started.md#getting-started • Anleitungen:
 https://github.com/gulpjs/gulp/tree/master/docs/recipes • Plugins schreiben:
 https://github.com/gulpjs/gulp/blob/master/docs/ writing-a-plugin/README.md
33. Besten Dank! • Thomas Jaggi • thomas.jaggi@unic.com
 • https://twitter.com/backflip • https://github.com/backflip