Gulpfile for WordPress (3.9.1)

gulpfile.js

/**
 * Configuration.
 *
 * You should only need to change these few values to get everything up and running
 */
var project = 'basetheme'; // Project Name - Lowercase, no spaces, used below in urls (use name of theme folder)
var projectURL = 'http://basetheme.dev'; // Project URL. Taken from your MAMP, WAMP or whatever local server you use.

/**
 * File and folder links
 *
 */
var styleSRC = './wp-content/themes/' + project + '/source/scss/styles.scss';
var criticalStyleSRC = './wp-content/themes/' + project + '/source/scss/critical.scss';
var styleDestination = './wp-content/themes/' + project + '/build/';

var jsVendorSRC = './wp-content/themes/' + project + '/source/js/vendor/*.js';
var jsVendorDestination = './wp-content/themes/' + project + '/build/';
var jsVendorFile = 'vendors';

var jsCustomSRC = './wp-content/themes/' + project + '/source/js/custom/*.js';
var jsCustomDestination = './wp-content/themes/' + project + '/build/';
var jsCustomFile = 'custom';

var styleWatchFiles = './wp-content/themes/' + project + '/source/scss/**/*.scss';
var vendorJSWatchFiles = './wp-content/themes/' + project + '/source/js/vendor/**/*.js';
var customJSWatchFiles = './wp-content/themes/' + project + '/source/js/custom/**/*.js';
var projectPHPWatchFiles = './wp-content/themes/' + project + '/**/*.php';
var projectHTMLWatchFiles = './wp-content/themes/' + project + '/**/*.html';

const AUTOPREFIXER_BROWSERS = [
	'last 2 version',
	'> 1%',
	'ie >= 11',
	'ie_mob >= 10',
	'ff >= 30',
	'chrome >= 34',
	'safari >= 7',
	'opera >= 23',
	'ios >= 7',
	'android >= 4',
	'bb >= 10'
];

/**
 * Load Plugins.
 *
 * Load gulp plugins and passing them semantic names.
 */
var gulp = require('gulp');

/** CSS plugins */
var sass = require('gulp-sass');
var minifycss = require('gulp-uglifycss');
var autoprefixer = require('gulp-autoprefixer');
var mmq = require('gulp-merge-media-queries');

/** JS plugins */
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jslint = require('gulp-jslint');

/** Utility plugins */
var rename = require('gulp-rename');
var lineec = require('gulp-line-ending-corrector');
var filter = require('gulp-filter');
var sourcemaps = require('gulp-sourcemaps');

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

/**
 * BrowserSync Task
 */
gulp.task('browser-sync', function() {
	browserSync.init({
		proxy: projectURL,
		open: true,
		notify: false
	});
});

/**
 * SASS to CSS tasks
 */
gulp.task('styles', function() {
	gulp
		.src(styleSRC)
		.pipe(sourcemaps.init())
		.pipe(
			sass({
				errLogToConsole: true,
				outputStyle: 'expanded',
				precision: 10
			})
		)
		.on('error', console.error.bind(console))
		.pipe(sourcemaps.write({ includeContent: false }))
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
		.pipe(sourcemaps.write())
		.pipe(lineec())
		.pipe(gulp.dest(styleDestination))
		.pipe(filter('**/*.css'))
		.pipe(mmq({ log: true }))
		.pipe(browserSync.stream())
		.pipe(rename({ suffix: '.min' }))
		.pipe(
			sass({
				errLogToConsole: true,
				outputStyle: 'compressed',
				precision: 10
			})
		)
		.pipe(
			minifycss({
				maxLineLen: 10
			})
		)
		.pipe(lineec())
		.pipe(gulp.dest(styleDestination))
		.pipe(filter('**/*.css'))
		.pipe(browserSync.stream());
});

/**
 * Critical SASS to CSS tasks
 */
gulp.task('criticalStyles', function() {
	gulp
		.src(criticalStyleSRC)
		.pipe(sourcemaps.init())
		.pipe(
			sass({
				errLogToConsole: true,
				outputStyle: 'compact',
				precision: 10
			})
		)
		.on('error', console.error.bind(console))
		.pipe(sourcemaps.write({ includeContent: false }))
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
		.pipe(sourcemaps.write())
		.pipe(lineec())
		.pipe(gulp.dest(styleDestination))
		.pipe(filter('**/*.css'))
		.pipe(mmq({ log: true }))
		.pipe(browserSync.stream())
		.pipe(rename({ suffix: '.min' }))
		.pipe(
			sass({
				errLogToConsole: true,
				outputStyle: 'compressed',
				precision: 10
			})
		)
		.pipe(
			minifycss({
				maxLineLen: 10
			})
		)
		.pipe(lineec())
		.pipe(gulp.dest(styleDestination))
		.pipe(filter('**/*.css'))
		.pipe(browserSync.stream());
});

/**
 * Vendor / ExternalJS Files
 */
gulp.task('vendorJS', function() {
	gulp
		.src(jsVendorSRC)
		.pipe(concat(jsVendorFile + '.js'))
		.pipe(lineec())
		.pipe(gulp.dest(jsVendorDestination))
		.pipe(
			rename({
				basename: jsVendorFile,
				suffix: '.min'
			})
		)
		.pipe(uglify())
		.pipe(lineec())
		.pipe(gulp.dest(jsVendorDestination));
});

/**
 * Custom JS files
 */
gulp.task('customJS', function() {
	gulp
		.src(jsCustomSRC)
		.pipe(concat(jsCustomFile + '.js'))
		.pipe(lineec())
		.pipe(gulp.dest(jsCustomDestination))
		.pipe(
			rename({
				basename: jsCustomFile,
				suffix: '.min'
			})
		)
		.pipe(uglify())
		.pipe(lineec())
		.pipe(gulp.dest(jsCustomDestination));
});

/**
 * Watch Tasks
 */
gulp.task(
	'default',
	['criticalStyles', 'styles', 'vendorJS', 'customJS', 'browser-sync'],
	function() {
		gulp.watch(projectPHPWatchFiles, reload);
		gulp.watch(projectHTMLWatchFiles).on('change', reload);
		gulp.watch(styleWatchFiles, ['styles', 'criticalStyles']);
		gulp.watch(vendorJSWatchFiles, ['vendorJS', reload]);
		gulp.watch(customJSWatchFiles, ['customJS', reload]);
	}
);