Hello Gulp

An introduction to gulp: https://github.com/hilios/hello-gulp

Transcript

1. Hello Gulp! @hilios
2. Edson Hilios Software Engineer @ Telefónica https://github.com/hilios edson (at) hilios.com.br
3. Yet another build system...
4. Build system • Pre-compilers: LESS, SASS, CoffeeScript; • Automate repetitive tasks; • Optimize files for production / deploy; • Ease development workflow;
6. Summary • Minimal API; • Automate tasks; • Stream IO; • Flow control: Async / Sync; • Built-in watch;
7. Install $ npm install -g gulp
8. Install Project gulpfile.js
9. API var gulp = require('gulp'); gulp.task(); gulp.src(); gulp.dest(); gulp.watch();
10. API • Code over configuration; • Plain JS and Node; • ~30% less code; • Easier to split in several files; • Easier to hack and extend;
11. Tasks gulp.task('build', function() { return gulp.src(['**/*.js', '**/*.jst']) .pipe(aPlugin()) .pipe(anotherPlugin()) .pipe(gulp.dist('./bin/js')); });
12. Tasks stream .pipe( doSomething() ) .pipe( ... ) .pipe( ... ) .pipe( ... )
13. Tasks $ gulp build
14. Output $ gulp build [gulp] Using gulpfile /gulpfile.js [gulp] Starting 'build'... [gulp] Finished 'build' after 6.81 ms
15. Tasks // Task with dependencies gulp.task('name', ['dependency1', ...], function() { ... }); // Task alias gulp.task('name', ['dependency1', ...]); // 'Default' task => $ gulp gulp.task('default', ['lint', 'build', 'less']);
16. Tasks $ gulp --tasks
17. IO operation are slow, and gulp is FAST! lorem ipsum dolor sit Stream READ WRITE
18. .js .js .js .js .js min.js .lint() .concat() .minify() .rename()
19. Stream var lint = require('gulp-jshint'), concat = require('gulp-concat'); gulp.src('*.js') .pipe(lint()) .pipe(concat('all.js')) .pipe(gulp.dist('./bin')); READ WRITE
20. By default, tasks run with maximum concurrency -- e.g. it launches all the tasks at once and waits for nothing. – Gulp API documentation
21. Flow control gulp.task('stream', function() { var stream = gulp.src('**/*.js') .pipe(someplugin()) .pipe(gulp.dist('./bin')); return stream; });
22. Flow control gulp.task('timeout', function(done) { setTimeout(function() { done(exitCode); }, 1000); });
23. Flow control gulp.task('build', function(done) { gulp.src(['**/*.js', '**/*.jst']) .pipe(aPlugin()) .pipe(gulp.dist('./bin/js')); gulp.src('**/*.css') .pipe(other()) .pipe(gulp.dist('./bin/css')); done(); // This won't work as expected });
24. Watch gulp.task('default', function() { gulp.watch('**/*.js', ['lint', 'concat']); });
25. Plugins • gulp-concat • gulp-rename • gulp-jshint • gulp-karma • gulp-less • gulp-coffee • gulp-include • gulp-uglify • gulp-zip • gulp-bump https://www.npmjs.org/search?q=gulp-*
26. Drawbacks • Manage errors in pipe; • Docs aren't that good; • Easy but not trivial;
27. Caveats // Load a config file var config = require('config.json'); gulp.task('build', function(done) { gulp.src(config.js) .pipe(...); });
28. Caveats var util = require('gulp-util'); // Emit sound util.beep(); // Log with color util.log(); // Lo-dash template util.template();
29. Caveats gulp.src('**/*.js') .pipe(less()) .on('error', function(error) { // Handle errors console.log(error.message); });
30. Caveats var karma = require('karma').server; gulp.task('test', function(done) { karma.start({ configFile: __dirname + '/karma.conf.js' }, function(exitCode) { done(exitCode); }); });
31. Hands on...| https://github.com/hilios/hello-gulp
32. Tks :) https://speakerdeck.com/hilios/hello-gulp