Starter Gulp Project (compiles Sass, CoffeeScript and JavaScript, Jade)

.bowerrc

{
	"directory": "bower_components"
}

bower.json

{
  "name": "project-name",
  "version": "0.0.1",
  "authors": [
    "author": "Your Name <[email protected]>"
  ],
  "devDependencies": {
    
  }
}

gulpfile.js

'use strict';


//===================================
// Config

// source files for processing
var sources = {
	scripts: [
		'source/scripts/application.coffee' // custom application scripts
	],
	styles: [
		'source/styles/**/*.scss' // Foundation + custom application styles
	],
	jade: [
		'source/*.jade'
	],
	images: [
		'source/images/**/*.{png,jpg,gif,jpeg,svg}'
	]
};

// target directories for compiled source files
var targets = {
	scripts: 'build/scripts',
	styles: 'build/styles',
	images: 'build/images',
	root: 'build/'
};

// load all Gulp plugins
var gulp = require('gulp'),
	browserSync = require('browser-sync'),
	autoprefixer = require('gulp-autoprefixer'),
	changed = require('gulp-changed'),
	coffee = require('gulp-coffee'),
	concat = require('gulp-concat'),
	filter = require('gulp-filter'),
	imagemin = require('gulp-imagemin'),
	jade = require('gulp-jade'),
	plumber = require('gulp-plumber'),
	replace = require('gulp-replace'),
	sass = require('gulp-sass'),
	uglify = require('gulp-uglify');

var reload = browserSync.reload;



//===================================
// Processes

// compile Jade -> HTML
gulp.task('jade', function() {

	return gulp.src( sources.jade )
		.pipe( plumber() )
		.pipe( jade( { pretty: true } ) )
		.pipe( gulp.dest( targets.root ) );

});

// compile all custom and third-party SASS -> CSS
gulp.task('styles', function() {

	// handle Sass errors so the server process doesn't get terminated
	var sass_error = function( e ){
		return console.log( e );
	};

	return gulp.src( sources.styles )
		.pipe( sass( {
			onError: sass_error,
			errLogToConsole: true,
			outputStyle: 'compressed'
		} ) )
		.pipe( autoprefixer( [ 'last 2 versions', '> 1%' ] ) )
		.pipe( gulp.dest( targets.styles ) );

});

// compress design images
gulp.task('images', function() {

	return gulp.src( sources.images )
		.pipe( plumber() )

		// only pipe through modified images
		.pipe( changed( targets.images ) )
		.pipe( imagemin() )
		.pipe( gulp.dest( targets.images ) );

});

// compile and minify custom scripts (from CoffeeScript) and third-party JS -> combined, minified JS
gulp.task('scripts', function() {

	// create filters for selective processing within the pipe()
	var coffee_filter = filter( [ 'application.coffee' ] );

	return gulp.src( sources.scripts )
		.pipe( plumber() )

		// parse and minify CoffeeScript
		.pipe( coffee_filter )
		.pipe( coffee( { bare: true } ) )
		.pipe( coffee_filter.restore() )

		// concat and minify all scripts
		.pipe( concat( 'application.js', { newLine: ';' } ) )
		.pipe( uglify() )
		.pipe( gulp.dest( targets.scripts ) );

});


//===================================
// Tasks

// run the dev server
gulp.task('server', function() {

	return browserSync({
		open: true,
		reloadDelay: 1200,
		notify: false,
		watchOptions: {
			debounceDelay: 1000
		},
		server: {
			baseDir: targets.root
		}
	});

});

// watch source and build directories for changes
gulp.task('watch', function() {

	// watch for changes to the source files, trigger compilation
	gulp.watch( 'source/**/*.jade', [ 'jade' ] );

	gulp.watch( 'source/scripts/application.coffee', [ 'scripts' ] );

	gulp.watch( sources.styles, [ 'styles' ] );

	gulp.watch( sources.images, [ 'images' ] );

	// watch for changes deployed to the build directory and reload browser
	return gulp.watch('build/**/**', function( file ) {

		if ( file.type === "changed" ) {
			return browserSync.reload();
		}
		
	});

});

// build from source w/o starting the dev server
gulp.task( 'build', [ 'scripts', 'styles', 'jade' ] );

// build from source and start dev server
gulp.task( 'default', [ 'watch', 'server', 'build' ] );

installation.markdown

1. cd to project root
2. $ npm install

Initial configuration assumes directory structure of:

source
  styles
  scripts
  images
  index.jade

Start dev server: $ gulp

Build project from source: $ gulp build

package.json

{
  "name": "project-name",
  "version": "0.0.1",
  "description": "",
  "author": "Your Name <[email protected]>",
  "devDependencies": {
    "browser-sync": "latest",
    "gulp": "latest",
    "gulp-add-src": "latest",
    "gulp-autoprefixer": "latest",
    "gulp-changed": "latest",
    "gulp-coffee": "latest",
    "gulp-concat": "latest",
    "gulp-filter": "latest",
    "gulp-imagemin": "latest",
    "gulp-jade": "latest",
    "gulp-modulizr": "latest",
    "gulp-plumber": "latest",
    "gulp-replace": "latest",
    "gulp-sass": "latest",
    "gulp-uglify": "latest"
  }
}