Gulp build process for web assets [2015-04-24]

gulpfile.js

/*  Plugins used by this project
--------------------------------------------------------------------------------------
	Plugins loaded here and assigned to reference variables
-------------------------------------------------------------------------------------- */

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefix   = require('gulp-autoprefixer');
var minifycss    = require('gulp-minify-css');
var rename       = require('gulp-rename');
var notify       = require('gulp-notify');
var gfilter      = require('gulp-filter');
var plumber      = require('gulp-plumber');
var gutil        = require('gulp-util');
var uglify       = require('gulp-uglify');
var gulpif       = require('gulp-if');
var size         = require('gulp-size');
var concat       = require('gulp-concat');
var del          = require('del');


/*  Paths
--------------------------------------------------------------------------------------
	Set all the paths used by this project. 

	Source Folder structure:
    -----------------------------
	source/
	|– img/
	|– js/
	|   |– libs/
	|- scss/

	Destination Folder structure:
    -----------------------------
	assets/
	|– img/
	|– js/
	|- css/

-------------------------------------------------------------------------------------- */

var basePaths = {
    src: './source/',
    dest: './assets/',
};
var paths = {
    images: {
        src:   basePaths.src + 'img/',
        dest:  basePaths.dest + 'img/'
    },
    scripts: {
        src:   basePaths.src + 'js/',
        dest:  basePaths.dest + 'js/'
    },
    styles: {
        src:   basePaths.src + 'scss/',
        dest:  basePaths.dest + 'css/'
    },
};
var appFiles = {
    images:    paths.images.src + '**/*.{gif,png,svg,jpg,jpeg}',
    styles:    paths.styles.src + '**/*.scss',
    script:    paths.scripts.src + 'theme.js',
    jslib:     paths.scripts.src + 'plugins/**/*.js'
};


/*  Dev Mode
--------------------------------------------------------------------------------------
	Pass --minify as a parameter to gulp when you want to minify/uglify/optimize.
-------------------------------------------------------------------------------------- */

var shouldMinify = false;
if(gutil.env.minify === true) {
    shouldMinify  = true;
}


/*  Messages
--------------------------------------------------------------------------------------
	A display error function, to format and make custom errors more uniform
-------------------------------------------------------------------------------------- */

var displayError = function(error) {

	// Initial building up of the error
	var errorString = '[' + error.plugin + ']';
	errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end

	// If the error contains the filename or line number add it to the string
	if(error.fileName)
		errorString += ' in ' + error.fileName;

	if(error.lineNumber)
		errorString += ' on line ' + error.lineNumber;

	// This will output an error like the following:
	// [gulp-sass] error message in file_name on line 1
	console.error(errorString);
	gutil.beep();
	this.emit('end');
}

var changeEvent = function(evt) {
    gutil.log('File', gutil.colors.cyan(evt.path.replace(new RegExp('/.*(?=/' + basePaths.src + ')/'), '')), 'was', gutil.colors.magenta(evt.type));
};

/*  Clean Task
--------------------------------------------------------------------------------------
	The Clean task is used to obliterate the contents of the ./assets folder.
	Use this task before running a production build (gulp build --minify)
-------------------------------------------------------------------------------------- */

gulp.task('clean', function(cb) {
	del([basePaths.dest], cb)
});


/*  CSS Task
--------------------------------------------------------------------------------------
	The CSS task uses libsass via clean-css and gulp-sass.
	The task does the following:
	- Compile using gulp-sass
	- Write the source map for the compiled sass
	- Autoprefix the compiled CSS
	- Create a minified version if in production mode
-------------------------------------------------------------------------------------- */

gulp.task('css', ['clean'], function() {

	// Prevent reading sourcemaps to autoprefix them or make sourcemaps of sourcemaps
	var filter = gfilter(['*.css', '!*.map']);

	return gulp.src(appFiles.styles)
		.pipe(plumber({
			errorHandler: displayError
		}))
		.pipe(sourcemaps.init())
		.pipe(sass({}))
		.pipe(sourcemaps.write())
		.pipe(filter)
		.pipe(autoprefix({
			browsers: [
				'last 2 versions',
				'> 1%',
				'ie 9',
				'safari <= 6'
			]
		}))
		.pipe(gulp.dest(paths.styles.dest))
		.pipe(gulpif(shouldMinify, rename({ suffix: '.min' })))
		.pipe(gulpif(shouldMinify, minifycss({
			advanced: true,
			aggressiveMerging: true,
			mediaMerging: false
		})))
		.pipe(gulpif(shouldMinify, gulp.dest(paths.styles.dest)))
		.pipe(size())
		.pipe(filter.restore())
		.pipe(plumber.stop());
		// .pipe(notify({ message: 'Styles task complete' }));
});

/*  JS Task
--------------------------------------------------------------------------------------
	The JS task does the following:
	- Concatenate any third party plugins in ./source/js/plugins
	- Add the theme specific JS from ./source/js/theme.js
	- Minify the output if in production mode
-------------------------------------------------------------------------------------- */

gulp.task('js', ['clean'], function(){
  return gulp.src([appFiles.jslib, appFiles.script])
    .pipe(concat('theme.js'))
    .pipe(gulp.dest(paths.scripts.dest))
    .pipe(gulpif(shouldMinify, rename({ suffix: '.min' })))
    .pipe(gulpif(shouldMinify, uglify()))
    .pipe(gulp.dest(paths.scripts.dest));
});

/*  Copy images
--------------------------------------------------------------------------------------
	Copy the images from ./source/img to ./assets/img
-------------------------------------------------------------------------------------- */
gulp.task('copyimg', ['clean'], function() {
	gulp.src(appFiles.images).pipe(gulp.dest(paths.images.dest));
});

/*  Tasks and Watcher
--------------------------------------------------------------------------------------
	Gulp task declarations
-------------------------------------------------------------------------------------- */

// Watch folders for changes
gulp.task('watch', ['copyimg','css','js'], function(){
    gulp.watch(appFiles.styles, ['css']).on('change', function(evt) {
        changeEvent(evt);
    });
    gulp.watch(paths.scripts.src + '*.js', ['js']).on('change', function(evt) {
        changeEvent(evt);
    });
})

gulp.task('default', ['clean','copyimg','css','js', 'watch']);
gulp.task('build', ['clean','copyimg','css','js'], function() {

});