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;
5. None

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