Building without boundaries with Gulp

Why Use a build tool?

  • Automation
  • Predictability
  • Performance

What is Gulp?

  • Node based
  • Memory
  • Asynchronous
  • Extensible
  • 5,740+ modules

Getting Started

  • Plan ahead
  • File writing strategy
  • Deployment strategy

Plan Ahead

  • List what you do manually
  • Find modules to help automate
  • What is considered a "failed" build
  • Start making your gulpfile
  • Keep updating

File Writing Strategy

  • Move files
  • Edit sources
  • Add to sources

Deployment Process

  • What will run gulp?
  • Error handling
  • Automation

Getting Setup

Install Gulp globally


$ npm install -g gulp

Include in package.json


{
  "name": "giftcards-gulp",
  "version": "0.0.0",
  "dependencies": {
    "gulp": "^3.8.10",
    "gulp-bower": "~0.0.6"
  }
}

Sample gulpfile.js


var gulp = require('gulp');

gulp.task('moveFiles', function () {
  return gulp.src('./src/js/**/*.js').pipe(gulp.dest('./dist/js'));
});

gulp.task('dev', ['moveFiles']);

Common terminology

Review common functions used in Gulp which is the foundation to all Gulp files

Tasks

  • Specifies a friendly name to functionality
  • Name cannot contain spaces
  • Can be used as a dependency for other tasks
  • Must have a return

var gulp = require('gulp');
gulp.task(name, [], function() {
    return gulp.src(...).pipe(....);
});

gulp.src

  • Emits files that match glob patterns
  • Returns a stream of Vinyl files
  • Can include or exclude files with patterns
  • Glob patterns run in order defined

gulp.src([
  './htdocs/+(app|fonts|js|css)/**',
  '!./htdocs/js/yui/**'
], {read: false})

pipe

  • Pulls data out of the readable stream
  • Writes data to supplied destination
  • Manages data flow for fast moving streams

gulp.dest

  • Writes files to the relative path file system
  • Emits the same stream that was sent into it
  • Relative paths are calculated against base

gulp.src('./js/**/*.js')
  .pipe(gulp.dest('./dist/js')
  .pipe(uglify())
  .pipe(gulp.dest('./dist/js/min');

Dependencies


var gulp = require('gulp'),
    clean = require('gulp-clean');

gulp.task('cleanDist', function() {
  return gulp.src('./dist/**').pipe(clean());
});
gulp.task('distMove', ['cleanDist'], function () {
  return gulp.src('./js/**/*.js').pipe(gulp.dest('./dist/js'));
});
gulp.task('build', ['cleanDist','distMove']);

Vinyl Streams and Adapters

  • Stream is a collection of vinyl objects
  • Vinyl is the metadata behind the file
  • Vinyl Adapters are readers of the files that follow the interface src, dest, and watch

Plugins

Manipulates and returns vinyl streams with modified data


var gulp = require('gulp'),
    ngAnnotate = require('gulp-ng-annotate'),
    uglify = require('gulp-uglify');

gulp.task('annotateCardBuild', function() {
  return gulp.src('./cardBuild/buildApp.js')
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(gulp.dest('./cardBuild'));
});

Gulp Watch

Given a glob pattern Gulp can run tasks when a file changes.

Once watch starts, new files will not be added.


var gulp = require('gulp');
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['compass', 'inject-dev']);
  gulp.watch('./js/**/*.js', ['minify-js', 'inject-dev']);
});

CSS Compilation

Compile all your CSS with your favorite pre-processor!


var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    compass = require('gulp-compass');

gulp.task('compass', function () {
  return gulp.src('./sass/*.scss')
    .pipe(plumber())
    .pipe(compass({
      css: 'dist/css',
      sass: 'sass'
    }))
    .pipe(gulp.dest('dist/css'));
});

Minify CSS

Thin wrapper to clean-css which optimizes CSS files


var minifyCSS = require('gulp-minify-css');
gulp.task('minifyCSS', ['cardBuildLess'], function () {
  return gulp.src('./htdocs/css/**/*.css')
    .pipe(minifyCSS())
    .pipe(gulp.dest('./htdocs/css'));
});

Bower

Runs `bower install` with provided arguments and options. Returns Vinyl Stream with created files.


var bower = require('gulp-bower');
gulp.task('bower', function () {
  return bower().pipe(gulp.dest('./bower_components'));
});

UglifyJS

Takes a Vinyl Stream of JS files and runs through UglifyJS's native code with provided options.


var uglify = require('gulp-uglify');
gulp.task('minifyCardBuildAssets', ['annotateBuild'], function() {
  return gulp.src(distPath + '/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest(distPath));
});

Arguments

Allows Gulp to take in arguments which can be used in the build process. Useful for passing in versions for instance.


gulp build --ver=2.9.24-rc.5

Arguments Example


var argv = require('yargs').argv;
if (argv.ver) {
  if (argv.ver.indexOf('-') > -1) {
    version = argv.ver.slice(0, argv.ver.indexOf('-'));
  } else {
    version = (argv.ver);
  }
} else {
  version = '0.0.0';
}

Merge Stream

Merges multiple process streams together and will finalize task when all streams are complete.


var merge = require('merge-stream');
gulp.task('moveFiles', function () {
  return merge(
    gulp.src('./js/**').pipe(gulp.dest('./dist/js')),
    gulp.src('./css/**').pipe(gulp.dest('./dist/css'))
  );
});

ngAnnotate

This plugin will rewrite the AngularJS compiler passes to allow for the code to Uglified.

Formerly named: ngmin


var gulp = require('gulp'),
    ngAnnotate = require('gulp-ng-annotate'),
    uglify = require('gulp-uglify');

gulp.task('annotateBuild', ['buildAssets'], function() {
return gulp.src(cardBuildDistPath + '/cardBuild/buildApp.js')
  .pipe(ngAnnotate())
  .pipe(uglify())
  .pipe(gulp.dest(cardBuildDistPath + '/cardBuild'));
});

Protractor

Have all your Protractor tests run with Gulp and provide feedback for failed builds.


var gulp = require('gulp');
var cardBuildSrcPath = './src/cardbuild';
gulp.task('cardBuildE2ETests', function() {
  var protractor = require('gulp-protractor').protractor;
  gulp.src([cardBuildBasePath + '/test/e2e/*.js'])
    .pipe(protractor({
      configFile: cardBuildSrcPath+'/protractor.conf.js',
      args: ['--baseUrl', 'http://www.giftcards.com']
    }))
    .on('error', function(e) { throw e; });
});

Karma Unit Tests

Modules: karma, karma-jasmine, karma-phantomjs-launcher, karma-ng-html2js-preprocessor


var gulp = require('gulp');
gulp.task('cardBuildUnitTests', ['bower'], function(done) {
  var karma = require('karma').server;
  karma.start({
    configFile: cardBuildBasePath + '/karma.conf.js',
    singleRun: false
  }, function(exitStatus){
    done(exitStatus ? 'Failing Unit Tests!' : undefined);
  });
});
  • Deploy to your CDN (Cloudfiles,S3)
  • Run performance tests (psi)
  • Minify images! (gulp-imagemin)
  • Find unused CSS! (gulp-uncss)
  • Concatenate files (gulp-concat)
  • Auto-prefix CSS (gulp-autoprefixer)
  • SourceMap's? Oh yeah. (gulp-sourcemaps)
  • 5,700+ other options!

GULP ALL THE THINGS

Gulp's Scary Side

  • Slower builds
  • Relying on 3rd party code
  • Dreadful error handling
  • One gulpfile to rule them all

Gulp not for you?

Alternatives to using Gulp

  • Make (Make)
  • Grunt (Node)
  • Broccoli (Node)
  • Brunch (Node)
  • Jake (Node)
  • Rake (Ruby)
  • NPM (Node)

Pure NPM


"devDependencies": {
  "jshint": "latest",
},
"scripts": {
  "lint": "jshint **.js"
}

Conclusion

Gulp is our build system that we use and trust. Find one that will work for you and your team and get started. With this presentation you learned the beginnings of how to put together a build system that will work for you.

THANK YOU!

Chad Smith
Software Development Manager
chad.smith@giftcards.com
@hppycoder

Questions?