Gulp.js

Created by Øyvind Marthinsen / @oyvinmar

Build Systems

Why?

Automation of tasks

Old School Build Systems

  • Maven
  • Visual Studio (MSBuild)
  • Gradle
  • Rake
  • GNU Make

Many frontend task not adequately solved by these tools

Frontend tasks

  1. Compilation (CoffeScript, SASS, LESS..)
  2. Linting
  3. Unit testing
  4. Minification (JS, CSS)
  5. Concatenation

Repeat when a src file changes

Frontend-centric build tools

Why Gulp.js?

  • Small API surface
  • Stream-based build system
  • Code over configuration
  • Runs with maximum concurrency by default

The gulp api

  • gulp.task(name[, deps], fn)
  • gulp.src(globs)
  • gulp.dest(path)
  • gulp.watch(glob[, opts], tasks)

gulp.task(name[, deps], fn) 


      gulp.task('somename', function() {
        // Do stuff
      });
    

      gulp.task('build', ['somename', 'test'];
     

     > gulp build

gulp.src(glob) 


    gulp.src('client/templates/*.jade')
      .pipe(jade())
  

    gulp.src(['src/**/*.js', 'test/spec/**/*.js'])
    .pipe(jshint())

gulp.dest(folder) 


    gulp.src('./client/templates/*.jade')
      .pipe(jade())
      .pipe(gulp.dest('./build/templates'))
      .pipe(minify())
      .pipe(gulp.dest('./build/minified_templates'));

gulp.watch(glob[, opts], tasks)


    gulp.watch('app/**/*.js', ['test','reload']);

Grokking streams


    gulp.task('scripts', function () {
      return gulp.src('src/app/**/*.js') // <-- read from filesystem
        // In memory transform
        .pipe(jshint('.jshintrc'))    // <-- lint the code
        .pipe(concat('app.min.js'))   // <-- concatenate to one file
        .pipe(uglify())               // <-- minify the file
        .pipe(rev())                  // <-- add revision to filename
        .pipe(gulp.dest('dist/app')); // <-- write to filesystem
    });

Looks nice

But we already use a build system!

Run Gulp.js from your build system

Add a proxy


  gulp.task('serve', function () {
    connect.server({
      port: 3000,
      middleware: function () {
        return [ (function () {
          var url = require('url');
          var proxy = require('proxy-middleware');
          var options = url.parse('http://localhost:7000/api/');
          options.route = '/api';
          return proxy(options);
        })() ];
      }
    });
  });

Any questions?