Gulp File for WordPress (Gulp 4+)

gulpfile.js

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

const PROJECT_FOLDER = './wp-content/themes/' + project;

/**
 * File and folder links
 *
 */
var styleSRC = PROJECT_FOLDER + '/source/scss/styles.scss';
var criticalStyleSRC = PROJECT_FOLDER + '/source/scss/critical.scss';
var styleDestination = PROJECT_FOLDER + '/build/';

var jsVendorSRC = PROJECT_FOLDER + '/source/js/vendor/*.js';
var jsVendorDestination = PROJECT_FOLDER + '/build/';
var jsVendorFile = 'vendors';

var jsCustomSRC = PROJECT_FOLDER + '/source/js/custom/*.js';
var jsCustomDestination = PROJECT_FOLDER + '/build/';
var jsCustomFile = 'custom';

var styleWatchFiles = PROJECT_FOLDER + '/source/scss/**/*.scss';
var vendorJSWatchFiles = PROJECT_FOLDER + '/source/js/vendor/**/*.js';
var customJSWatchFiles = PROJECT_FOLDER + '/source/js/custom/**/*.js';
var projectPHPWatchFiles = PROJECT_FOLDER + '/**/*.php';
var projectHTMLWatchFiles = PROJECT_FOLDER + '/**/*.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();

function reload(done) {
	browserSync.reload();
	done();
}

/**
 * BrowserSync Task
 */
function watch() {
	gulp.watch(projectPHPWatchFiles, reload);
	gulp.watch(projectHTMLWatchFiles).on('change', reload);
	gulp.watch(styleWatchFiles, gulp.series([styles, criticalStyles]));
	gulp.watch(vendorJSWatchFiles, gulp.series([vendorJS, reload]));
	gulp.watch(customJSWatchFiles, gulp.series([customJS, reload]));

	return browserSync.init({
		proxy: projectURL,
		open: true,
		notify: false
	});
}

/**
 * SASS to CSS tasks
 */
function styles() {
	return 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
 */
function criticalStyles() {
	return 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
 */
function vendorJS() {
	return 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
 */
function customJS() {
	return 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));
}

exports.default = gulp.series(styles, vendorJS, customJS, watch);
exports.production = gulp.series(criticalStyles, styles, vendorJS, customJS, watch);
exports.watch = gulp.series(watch);