Gulpifyme !

(but with love)

By Enrique Amodeo / @eamodeorubio

Enrique Amodeo

(who is this guy?)

• Programming since 1984
• Currently eBay Senior Software Engineer
• Has loved JS since 2005
• Test infected
• Enthusiast of the Agile/Lean way
• Follow me at @eamodeorubio

This talk

What is Gulp?

• A build tool
• Task centric
• Based on NodeJS Streams
• Specifically a stream of Vinyl Files

WTF?????

Good old plain tasks

    gulp.task('task-A', function () {
        // Do A here!
    };

    gulp.task('task-B', function() { 
      // Do B here!
    });

    gulp.task('task-C', ['task-B'], function() {
      // Do C here, but wait for B to complete!
    });

    gulp.task('main', ['task-A', 'task-C']);
  

Good old *ASYNC* tasks

    gulp.task('task-A', function () {
        return iPromiseIWillDoA();
    };

    gulp.task('task-B', function(cb) { 
      // Do B
      if(everythingIsOk()) {
        return cb();
      }
      cb('Error!');
    });

    gulp.task('task-C', ['task-B'], function() {
      return streamOfCoolThingsForC();
    });
  

Getting the Files

    gulp.task('cool-build', function () {
        return gulp.src(['src/**/*.js', 'extra/**/*.js']);
    };

Processing the Files

    gulp.task('cool-build', function () {
        return gulp.src(['src/**/*.js', 'extra/**/*.js'])
                   .pipe(coolify())
                   .pipe(fastify({ compileToC: true }));
    };

Write the result

    gulp.task('cool-build', function () {
        return gulp.src(['src/**/*.js', 'extra/**/*.js'])
                   .pipe(coolify())
                   .pipe(fastify({ compileToC: true }))
                   .pipe(gulp.dest('output/dir/'));
    };

The whole picture

To plugin or not to plugin?

More Plugins than you expect

  $> npm install --save-dev gulp-concat
  $> npm install --save-dev gulp-clean
  $> npm install --save-dev gulp-less
  $> npm install --save-dev gulp-bless
  $> npm install --save-dev gulp-minimify-css
  $> npm install --save-dev gulp-jshint
  $> npm install --save-dev gulp-csslint
  $> npm install --save-dev gulp-mocha
  $> npm install --save-dev gulp-watch
  $> npm install --save-dev gulp-cached
  $> npm install --save-dev gulp-streamify
  $> npm install --save-dev gulp-uglify
  $> npm install --save-dev gulp-imagemin
  

Vinyl files!

• Plain JS Object
• Path & Relative path
• Contents can be Buffer or Stream or none
• You can always pipe them

Plugins are easy

  var through = require('through2'),
      PluginError = require('gulp-util').PluginError;
  module.exports = function(opts) {
    return through.obj(function(file, enc, callback) {
      if (file.isBuffer()) {
        // Process file, contents are a buffer 
      } else if (file.isStream()) {
        // Process file, contents are in a stream
      }
      if(someError) {
        this.emit('error', new PluginError(myPluginName, someError));
      } else {
        this.push(file);
      }
      callback();
    });
};

No need to plugin: Browserify

    gulp.task('build:js', ['clean:js'], function () {
      return browserify({
        entries: './main',
        noParse: ['jquery'],
        basedir: APP_SRC_DIR
      }).exclude('jquery')
        .bundle() // Up to here is normal browserify stuff!
        .pipe(source(require('./package.json').name + '.min.js'))
        // From here we have a Vinyl File stream
        .pipe(streamify(uglify({
          preserveComments: 'some'
        })))
        .pipe(gulp.dest(OUTPUT_DIR + 'js'));
    });

No need to plugin: Karma

  
    var karma = require('karma'),
        karmaConfig = require('./karma.conf.js');

    gulp.task('karma', ['dist'], function (cb) {
      karma.server.start(karmaConfig, cb);
    });
  

Watching

  
    gulp.task('lint', function () {
      return gulp
          .src(['test/**/*.js', 'lib/**/*.js'])
          .pipe(cache(taskId))
          .pipe(jshint(config))
          .pipe(jshint.reporter('default'));
    });

    gulp.watch(['test/**/*.js', 'lib/**/*.js'], ['lint']);
  

Watching: this won't work

  
    gulp.task('lint', function () {
      return gulp
          .src(['test/**/*.js', 'lib/**/*.js'])
          .pipe(cache(taskId))
          .pipe(jshint(config))
          .pipe(jshint.reporter('default'))
          .pipe(jshint.reporter('fail'));
    });
    
    gulp.watch(['test/**/*.js', 'lib/**/*.js'], ['lint']);
  

Watching: Need to plumber

  
    gulp.task('lint', function () {
      return gulp
          .src(['test/**/*.js', 'lib/**/*.js'])
          .pipe(cache(taskId))
          .pipe(jshint(config))
          .pipe(jshint.reporter('default'))
          .pipe(plumber({
            errorHandler: function() {
              this.emit('end');
            }
          }))
          .pipe(jshint.reporter('fail'));
    });    
    gulp.watch(['test/**/*.js', 'lib/**/*.js'], ['lint']);
  

Integrating with CI

    function makeLint() {
      return gulp.src(['test/**/*.js', 'lib/**/*.js'])
          .pipe(cache(taskId))
          .pipe(jshint(config))
          .pipe(jshint.reporter('default'));
    }
    gulp.task('lint', function () {
      return makeLint();
    });
    gulp.task('ci', function() {
      return makeLint().on('error', function() {
        process.exit(1);
      });
    });
    gulp.task('dev', function() {
      return gulp.watch(['test/**/*.js', 'lib/**/*.js'], ['lint']);
    });
  

Is Gulp for me?

In favour of Gulp

• Super fast!
• Pretty nice plugin ecosystem
• No need of a plugin for everything
• You don't get stuck
• Simple things are done in a simple way
• It's code, you can make your own utils!

Against Gulp

• You need to know how to code JS!
• You need understand NodeJS Streams
• Still a bit immature

Conclusion

• It works for me!
• Probably not good for non developers
• It will be better