GulpJS workflow example

gulpfile.js

/*
	Assets Tasks file with Gulp
	Uses Gulp as build system. used mainly for watching changes
	on the assets and process them to then copy the results into the
	public directory
 */
 
//require gulp and gulp-load-plugins. We then call the gulp-load-plugins task
//to automatically load all installed gulp plugins
var gulp       = require("gulp"),
	plugins    = require("gulp-load-plugins")(),
	bowerFiles = require('main-bower-files'),
	server     = require('tiny-lr')();

var watchify = require('watchify'),
	browserify = require('browserify'),
	source     = require('vinyl-source-stream');

//PATHS
var sassDir       = 'sass',
	targetCssDir  = '../styles',
	//javascript paths
	coffeeDir     = 'coffee',
	targetJsDir   = '../scripts',

	//twig views directory
	twigViewsDir  = '../views',

	//images directory
	imagesDir     = 'images',
	targetImgDir  = '../images',

	//bower dependencies directory for live-reload
	bowerDir      = 'vendor';

//------------------------------------------------------------------------------------
/* ------------------------------------- *
 * TASKS
 * ------------------------------------- */

/* Sass compile */
gulp.task('sass', function() {
	return gulp.src(sassDir + '/*.scss')
		.pipe( plugins.compass({config_file: 'config.rb', css: '../'}).on('error', plugins.util.log) )
		.pipe( plugins.plumber() )
		.pipe( plugins.autoprefixer('last 10 versions') )
		.pipe( plugins.rename('styles.css') )
		.pipe( gulp.dest(targetCssDir) )
		.pipe( plugins.notify('SASS Compile Done!.') )
		.pipe( plugins.livereload(server) );
});

/* coffee compile */
gulp.task('coffee', function() {
	return gulp.src(coffeeDir + '/**/*.coffee')
		.pipe( plugins.coffeelint() )
		.pipe( plugins.coffee({ bare: true }).on('error', plugins.util.log) )
		.pipe( plugins.plumber() )
		.pipe( gulp.dest(targetJsDir + '/lib') )
		.pipe( plugins.notify('Coffeescript libraries compiling Done!') )
		.pipe( plugins.livereload(server) );
});

gulp.task('browserify', function() {

	return browserify({
		// Specify the entry point of your app
		entries: ['./' + coffeeDir + '/main.coffee'],
		// Add file extentions to make optional in your requires
		extensions: ['.coffee', '.hbs']
	})
	// Enable source maps!
	.bundle({debug: true})
	// Report compile errors
	.on('error', plugins.util.log)
	// Use vinyl-source-stream to make the
	// stream gulp compatible. Specifiy the
	// desired output filename here.
	.pipe(source('owak.js'))
	// Specify the output destination
	.pipe(gulp.dest(targetJsDir))
	.pipe( plugins.notify('Scripts Compiled!') )
	.pipe( plugins.livereload(server) );
});


/* Bower libraries concatenation */
gulp.task('bower', function() {
	return gulp.src(bowerFiles(), { base: 'vendor' })
		   .pipe(plugins.filter('**/*.js', '!**/*.min.js'))
		   .pipe(plugins.concat('vendor.js'))
		   .pipe(gulp.dest(targetJsDir));
});


/* Blade Templates */
gulp.task('twig', function() {
    return gulp.src(twigViewsDir + '/**/*.twig')
				.pipe( plugins.livereload(server) );
});

/* Watcher */
gulp.task('watch', function() {
	global.isWatching = true;

	server.listen(35729, function(err) {
        if(err) {console.log(err);}
    });

    gulp.watch(twigViewsDir + '/**/*.twig', ['twig']);
    gulp.watch(sassDir + '/**/*.scss', ['sass']);
    gulp.watch(coffeeDir + '/**/*.coffee', ['browserify', 'coffeelibs']);
});

/* Default Task */
gulp.task('default', ['sass', 'browserify', 'coffeelibs', 'bower', 'twig' ,'watch']);

package.json

{
  "name": "owak-theme-assets",
  "version": "0.0.0",
  "description": "assets source files for the assets used in the OWAK Studios wordpress theme",
  "author": "Androide Osorio",
  "license": "ISC",

  "browserify": {
    "transform": ["coffeeify", "hbsfy" ]
  },
  "devDependencies": {
    "browserify": "^4.2.1",
    "browserify-shim": "^3.6.0",
    "coffeeify": "^0.6.0",
    "gulp": "^3.6.2",
    "gulp-autoprefixer": "0.0.7",
    "gulp-bower-files": "^0.2.2",
    "gulp-cache": "^0.1.3",
    "gulp-coffee": "^1.4.2",
    "gulp-coffeelint": "^0.3.2",
    "gulp-concat": "^2.2.0",
    "gulp-filter": "^0.4.1",
    "gulp-jade": "^0.5.0",
    "gulp-jshint": "^1.5.5",
    "gulp-livereload": "^1.3.1",
    "gulp-load-plugins": "^0.5.0",
    "gulp-minify-css": "^0.3.4",
    "gulp-notify": "^1.2.5",
    "gulp-phpunit": "^0.5.1",
    "gulp-plumber": "^0.6.1",
    "gulp-rename": "^1.2.0",
    "gulp-ruby-sass": "^0.4.3",
    "gulp-util": "^2.2.14",
    "handlebars": "^1.3.0",
    "hbsfy": "^1.3.2",
    "node-fs": "^0.1.7",
    "tiny-lr": "0.0.7",
    "vinyl-source-stream": "^0.1.1",
    "watchify": "^0.10.2",
    "main-bower-files": "^1.0.0"
  }
}