Gulp workflow as of 3 Nov 2014

1) readme.md

#Gulp Workflow

##First Time Setup

The following steps only need to happen once:

• Step 1 Add package.json and gulpfile.js to the root of your project.
• Step 2 If Node is not yet installed on the machine, it will need to be installed.
• Step 3 If Gulp has never been set up on the machine, the Gulp CLI will also need to be installed by running npm install gulp -g
• Step 4 Switch to the project root via command line, and run npm install to install the dependencies.
• Step 5 Add an image of your project's logo to your project root. The image should be named gulp.png and should be 150px by 150px.
• Step 6 Install the livereload browser extension, if it is not already installed.
• Step 7 Change Your Project Name to the name of your project in both gulpfile.js and package.json.
• Step 8 Update any paths in gulpfile.js as needed.

##Usage

Once everything has been set up, you simply need to run gulp live from a terminal (working directory should be the project root).

2) package.json

{
  "name": "Your Project Name",
  "version": "0.0.0",
  "description": "",
  "devDependencies": {
    "gulp": "^3.8.9",
    "gulp-autoprefixer": "^1.0.1",
    "gulp-concat": "^2.4.1",
    "gulp-livereload": "^2.1.1",
    "gulp-minify-css": "^0.3.11",
    "gulp-newer": "^0.3.0",
    "gulp-notify": "^2.0.0",
    "gulp-plumber": "^0.6.6",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^1.2.2",
    "gulp-size": "^1.1.0",
    "gulp-uglify": "^1.0.1",
    "gulp-watch": "^1.1.0",
    "lazypipe": "^0.2.2",
    "node-sass": "1.0.3"
  }
}

3) gulpfile.js

//load plugins
var gulp             = require('gulp'),
	autoprefixer     = require('gulp-autoprefixer'),
	concat           = require('gulp-concat'),
	livereload       = require('gulp-livereload'),
	minifycss        = require('gulp-minify-css'),
	newer            = require('gulp-newer'),
	notify           = require('gulp-notify'),
	plumber          = require('gulp-plumber'),
	rename           = require('gulp-rename'),
	sass             = require('gulp-sass'),
	size             = require('gulp-size'),
	uglify           = require('gulp-uglify'),
	watch            = require('gulp-watch'),
	path             = require('path'),
	lazypipe         = require('lazypipe');

//the title and icon that will be used for the Grunt notifications
var notifyInfo = {
	title: 'Your Project Name',
	icon: path.join(__dirname, 'gulp.png')
};

//glob patterns that are used more than once
var scssGlob = 'source/scss/**/*.scss',
	jsIndividualGlob = 'source/js/individual/**/*.js',
	jsCombinedGlob = 'source/js/combined/**/*.js';

//error notification settings for plumber
var plumberErrorHandler = function(err) {

	console.log( 'plumber error!' );

	notify.onError({
		title: notifyInfo.title,
		message: "Error: <%= err.message %>",
		sound: 'Pop'
	});
	this.emit('end');
};

//processes scripts individually (doesn't combine them)
var jsIndividualScripts = lazypipe()
	.pipe(plumber, {errorHandler: plumberErrorHandler})
	.pipe(newer, { dest: 'html/assets/js', ext: '.min.js' })
	.pipe(gulp.dest, 'html/js')
	.pipe(size, {showFiles: true})
	.pipe(uglify)
	.pipe(rename, { suffix: '.min' })
	.pipe(gulp.dest, 'html/js')
	.pipe(size, {showFiles: true});

//processes scripts collectively (combines them into one file)
var jsCombinedScripts = lazypipe()
	.pipe(plumber, {errorHandler: plumberErrorHandler})
	.pipe(newer, 'html/assets/js/main.min.js')
	.pipe(concat, 'scripts.js')
	.pipe(gulp.dest, 'html/assets/js')
	.pipe(size, {showFiles: true})
	.pipe(uglify)
	.pipe(rename, { suffix: '.min' })
	.pipe(gulp.dest, 'html/assets/js')
	.pipe(size, {showFiles: true});

//processes the scss
var scssProcessing = lazypipe()
	.pipe(plumber, {errorHandler: plumberErrorHandler})
	.pipe(sass, {outputStyle: ':compact'})
	.pipe(autoprefixer, 'last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')
	.pipe(gulp.dest, 'html/assets/css')
	.pipe(size, {showFiles: true})
	.pipe(rename, { suffix: '.min' })
	.pipe(minifycss)
	.pipe(gulp.dest, 'html/assets/css')
	.pipe(size, {showFiles: true});

//styles task
gulp.task('styles', function() {
	return gulp.src(scssGlob).pipe(scssProcessing());
});

//scripts individual task
gulp.task('scripts-individual', function() {
	return gulp.src(jsIndividualGlob).pipe(jsIndividualScripts());
});

//scripts combined task
gulp.task('scripts-combined', function() {
	return gulp.src(jsCombinedGlob).pipe(jsCombinedScripts());
});

//watch task
gulp.task('live', function() {
	livereload.listen();

	//watch all .scss files
	gulp.watch(scssGlob, ['styles']);

	//watch each individual .js file
	watch(jsIndividualGlob).pipe(jsIndividualScripts());

	//watch all combined .js files
	gulp.watch(jsCombinedGlob, ['scripts-combined']);

	//watch for changes on transpired templates, css, and js files
	gulp.watch([
		'craft/templates/**/*.twig',
		'html/assets/js/**/*.min.js',
		'html/assets/css/**/*.min.css'
	], function(event) {
		gulp.src(event.path)
			.pipe(plumber())
			.pipe(livereload())
			.pipe(notify({
				title: notifyInfo.title,
				icon: notifyInfo.icon,
				message: event.type + ': ' + event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was reloaded',
				sound: 'Pop'
			})
		);
	});
});

//default task - one time styles and scripts
gulp.task('default', ['styles', 'scripts-individual', 'scripts-combined']);