What is it?

Build tool using Node.js
Automates tasks
- ex: JS Lint, Image compress, etc...
Development Aid (live reload, auto-compile)

var gulp = require('gulp');

// Simple gulp task
gulp.task('default', function() {
  console.log("Hello World!");
  console.log('Default has been initiated! Starting count: ');
  for (var i = 1; i < 100; i++) {
    console.log(i +" bottles of beer on the wall");
  }
});

Hello World

JS Minify

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

var DEST = 'build/';

// example of gulp minify build
gulp.task('build', function() {
  console.log('Building your JS min files ...');
  return gulp.src('./examples/*.js')
    // This will output the non-minified version
    .pipe(gulp.dest(DEST))
    // This will minify and rename to foo.min.js
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(DEST));
});

rileyh.com/usc-js

var g = require('gulp-load-plugins')({lazy: false});
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var coffee = require('gulp-coffee');


// example of Coffee Script compiler
gulp.task('coffee', function () {
  console.log('Brewing some Coffee...');
  return gulp.src([
    './examples/*.coffee'
  ])
    .pipe(g.coffee())
    // .pipe(uglify())
    .pipe(gulp.dest('./coffee'));
});

Coffee Script Compiler

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');


// Image Compressor
gulp.task('images', function () {
  return gulp.src('imgs/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()]
    }))
    .pipe(gulp.dest('compressed'));
});

Image Compressor

rileyh.com/usc-js

Scaffolding

Gulp.js + Project Structure + 30 seconds = slush.js

rileyh.com/usc-js

What is slush?

Project Scaffold generator
Powered by node.js
Start a project in seconds

rileyh.com/usc-js

$ npm install -g slush

$ npm install -g slush-angular

$ slush angular

Let's DO this!

rileyh.com/usc-js

Other Generators

rileyh.com/usc-js