Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Einführung Gulp.js

61083f9614a7fc66393e8fae1c77e41c?s=47 Thomas Jaggi
November 05, 2014

Einführung Gulp.js

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

61083f9614a7fc66393e8fae1c77e41c?s=128

Thomas Jaggi

November 05, 2014
Tweet

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