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

Gulp - Fronteers

Gulp - Fronteers

15 minute talk in Dutch on Gulp.js. Not really worth anything without the actual talking but a video will be online soon, I was told.

For those who were there, find the Yeoman generator I (pretty much failed to) show afterwards here: https://github.com/pieterbeulque/generator-watermelon

72bdde5c6c3c9d5d85f6cbddcc736d52?s=128

pieterbeulque

May 22, 2014
Tweet

Transcript

  1. Gulp.js The streaming build system

  2. Allround development intern We Work We Play Front-end developer HEISME

    studio Full stack developer Freelance
  3. Yet another task runner?

  4. Wat zij zeggen • Code over config • High quality

    standards • Fast & efficient
  5. Code over Config gulpfile.js

  6. High quality Strict standards om plugin te laten goedkeuren

  7. Fast & efficient Node-streams gebaseerd ❤ Slechts één keer I/O

  8. Grunt file handling 3 reads Concatenate 1 write 1 read

    Coffeescript 1 write 1 read Minify & rename 1 write
  9. Gulp file handling 3 reads ! ! ! 5 pipes

    ! ! ! 1 write
  10. Wat ik vind • Merkbaar sneller • Meer intuïtieve omgeving

    • Logischer
  11. In ’t echt

  12. Installatie • Zowel globaal: npm install -g gulp • Als

    op projectbasis: npm install gulp
  13. gulpfile.js gulp.task(); gulp.src(); gulp.dest(); gulp.watch();

  14. var gulp = require('gulp'), gutil = require('gulp-util'), compass = require('gulp-compass'),

    rename = require('gulp-rename'); ! gulp.task('styles', function () { gulp.src('./css/scss/style.scss') .pipe(compass({ style: 'expanded', css: './css', sass: './css/scss', image: './img', javascript: './js', font: './css/fonts' })) .pipe(gulp.dest('./css')); }); ! gulp.task('default', ['styles'], function () { gulp.watch(['./css/scss/*.scss'], ['styles']); });
  15. That’s about it Merci!