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

Repeat when a src file changes

Frontend-centric build tools

• Brunch
• Grunt
• Gulp.js
• Broccoli

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?