Hello Gulp - Speaker Deck

Slide 1

Slide 1 text

Hello Gulp! @hilios

Slide 2

Slide 2 text

Edson Hilios Software Engineer @ Telefónica https://github.com/hilios edson (at) hilios.com.br

Slide 3

Slide 3 text

Yet another build system...

Slide 4

Slide 4 text

Build system ● Pre-compilers: LESS, SASS, CoffeeScript; ● Automate repetitive tasks; ● Optimize files for production / deploy; ● Ease development workflow;

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Summary ● Minimal API; ● Automate tasks; ● Stream IO; ● Flow control: Async / Sync; ● Built-in watch;

Slide 7

Slide 7 text

Install $ npm install -g gulp

Slide 8

Slide 8 text

Install Project gulpfile.js

Slide 9

Slide 9 text

API var gulp = require('gulp'); gulp.task(); gulp.src(); gulp.dest(); gulp.watch();

Slide 10

Slide 10 text

API ● Code over configuration; ● Plain JS and Node; ● ~30% less code; ● Easier to split in several files; ● Easier to hack and extend;

Slide 11

Slide 11 text

Tasks gulp.task('build', function() { return gulp.src(['**/*.js', '**/*.jst']) .pipe(aPlugin()) .pipe(anotherPlugin()) .pipe(gulp.dist('./bin/js')); });

Slide 12

Slide 12 text

Tasks stream .pipe( doSomething() ) .pipe( ... ) .pipe( ... ) .pipe( ... )

Slide 13

Slide 13 text

Tasks $ gulp build

Slide 14

Slide 14 text

Output $ gulp build [gulp] Using gulpfile /gulpfile.js [gulp] Starting 'build'... [gulp] Finished 'build' after 6.81 ms

Slide 15

Slide 15 text

Tasks // Task with dependencies gulp.task('name', ['dependency1', ...], function() { ... }); // Task alias gulp.task('name', ['dependency1', ...]); // 'Default' task => $ gulp gulp.task('default', ['lint', 'build', 'less']);

Slide 16

Slide 16 text

Tasks $ gulp --tasks

Slide 17

Slide 17 text

IO operation are slow, and gulp is FAST! lorem ipsum dolor sit Stream READ WRITE

Slide 18

Slide 18 text

.js .js .js .js .js min.js .lint() .concat() .minify() .rename()

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

By default, tasks run with maximum concurrency -- e.g. it launches all the tasks at once and waits for nothing. – Gulp API documentation

Slide 21

Slide 21 text

Flow control gulp.task('stream', function() { var stream = gulp.src('**/*.js') .pipe(someplugin()) .pipe(gulp.dist('./bin')); return stream; });

Slide 22

Slide 22 text

Flow control gulp.task('timeout', function(done) { setTimeout(function() { done(exitCode); }, 1000); });

Slide 23

Slide 23 text

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 });

Slide 24

Slide 24 text

Watch gulp.task('default', function() { gulp.watch('**/*.js', ['lint', 'concat']); });

Slide 25

Slide 25 text

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-*

Slide 26

Slide 26 text

Drawbacks ● Manage errors in pipe; ● Docs aren't that good; ● Easy but not trivial;

Slide 27

Slide 27 text

Caveats // Load a config file var config = require('config.json'); gulp.task('build', function(done) { gulp.src(config.js) .pipe(...); });

Slide 28

Slide 28 text

Caveats var util = require('gulp-util'); // Emit sound util.beep(); // Log with color util.log(); // Lo-dash template util.template();

Slide 29

Slide 29 text

Caveats gulp.src('**/*.js') .pipe(less()) .on('error', function(error) { // Handle errors console.log(error.message); });

Slide 30

Slide 30 text

Caveats var karma = require('karma').server; gulp.task('test', function(done) { karma.start({ configFile: __dirname + '/karma.conf.js' }, function(exitCode) { done(exitCode); }); });