WordPress Gulpfile

gulpfile.js

'use strict';

// Include gulp
var gulp = require('gulp');
var _ = require('lodash');

// Include our plugins
var gutil = require('gulp-util');
var flatten = require('gulp-flatten');
var modernizr = require('gulp-modernizr');
var sass = require('gulp-sass');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var header = require('gulp-header');
var footer = require('gulp-footer');
var clean = require('gulp-clean');
var gzip = require('gulp-gzip');
var gif = require('gulp-if');

// Include dependencies
var bourbon = require('node-bourbon').includePaths;
var neat = require('node-neat').includePaths;

// Load configuration
var config = require('./config.json');
var assets = './public/wp-content/themes/'+ config.theme +'/assets/';

// Assets paths, etc
config = _.extend(config, {
	assets: assets,
	images: assets +'images/',
	scss: assets +'scss/',
	css: assets +'css/',
	js: assets +'js/',
	header: '(function ($) {\n\'use strict\';\n',
	footer: '})(jQuery);\n'
});

// Sass options
var sassOptions = {
	noCache: true,
	lineNumbers: true,
	outputStyle: gutil.env.production ? 'compressed' : 'expanded',
	includePaths: [config.scss]
		.concat(bourbon)
		.concat(neat),
	errLogToConsole: gutil.env.watch
};

// Modernizr build options
var modernizrOptions = {
	uglify: true,
	excludeTests: ['csstransforms3d']
};

// Temporary directories
var tempPaths = [
	config.css,
	config.js +'vendor'
];

// Files to concat to vendor.js
function vendorScriptPaths() {
	var i, len, paths = [],
		globs = config.vendorScripts;
	for (i=0, len=globs.length; i<len; i++) {
		paths.push(config.js +'vendor/'+ globs[i]);
	}
	return paths;
}

// **** TASKS ****

// Clean out dest folders
gulp.task('clean', function () {
	gutil.log('Cleaning up...');
	return gulp.src(tempPaths, { read: false })
		.pipe(clean());
});

// Lint task
gulp.task('lint', function () {
	return gulp.src(config.js +'src/**/*.js')
		.pipe(header(config.header))
		.pipe(footer(config.footer))
		.pipe(jshint('.jshintrc.out'))
		.pipe(jshint.reporter('jshint-stylish'));
});

// Compile sass
gulp.task('sass', function () {
	return gulp.src(config.scss +'*.scss')
		.pipe(sass(sassOptions)
			.on('error', notify.onError({ title: 'Error compiling Sass' })))
		.pipe(gulp.dest(config.css))
		.pipe(gif(gutil.env.production, gzip()))
		.pipe(notify({ message: 'Sass finished compiling' }));
});

// Smallest possible Modernizr build
gulp.task('modernizr', function () {
	return gulp.src(config.js +'src/**/*.js')
		.pipe(modernizr('modernizr.min.js', modernizrOptions))
		.pipe(uglify())
		.pipe(gif(gutil.env.production, gzip()))
		.pipe(gulp.dest(config.js +'vendor'));
});

// Flatten vendor scripts
gulp.task('flatten', function () {
	return gulp.src(config.components +'**/*.min.js')
		.pipe(flatten())
		.pipe(gulp.dest(config.js +'vendor'));
});

// Concatenate & minify vendor scripts
gulp.task('vendor', ['flatten', 'modernizr'], function () {
	return gulp.src(vendorScriptPaths())
		.pipe(concat('vendor.js'))
		.pipe(gulp.dest(config.js))
		.pipe(notify({ message: 'Vendor scripts finished compiling' }));
});

// Concatenate & minify scripts
gulp.task('scripts', function () {
	return gulp.src(config.js +'src/**/*.js')
		.pipe(header(config.header))
		.pipe(footer(config.footer))
		.pipe(concat('main.js'))
		.pipe(gulp.dest(config.js))
		.pipe(rename('main.min.js'))
		.pipe(uglify({ outSourceMap: true }))
		.pipe(gif(gutil.env.production, gzip()))
		.pipe(gulp.dest(config.js))
		.pipe(notify({ message: 'Scripts finished compiling' }));
});

// Watch files For changes
gulp.task('watch', function () {
	gutil.env.watch = true;
	gulp.watch(config.js +'src/**/*.js', ['lint', 'scripts']);
	gulp.watch(config.scss +'**/*.scss', ['sass']);
});

// Task that runs everything once
gulp.task('build', ['clean'], function () {
	gulp.start('sass', 'vendor', 'lint', 'scripts');
});

// Default task with synchronous dependency
gulp.task('default', function () {
	gutil.env.watch = true;
	gulp.start('build', 'watch');
});