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

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!