Hello Gulp

Hello Gulp

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

456d07b3f7a1ab66502e232fd9b1d378?s=128

Edson Hilios

June 13, 2014
Tweet

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