Local WordPress Development with Gulp 4

I was up updating the npm packages in my Bootstrap 4 WordPress theme, StrapPress, and broke my Gulp file. I really like using Gulp with free wordpress themes to autoprefix, minimize CSS/JS, refresh my browser on code changes, and many other handy tasks.

I kept getting an “Assertion Error: Task never defined” in my terminal:

It turns out I updated to Gulp 4 and needed to update my gulpfile.js tasks to use the latest Gulp markup. Didn’t take long to figured out that I needed to start using gulp.series() and gulp.parellel() to fix my terminal errors.

Below is my latest gulpfile.js for Gulp 4 and my WordPress development.

	// Load all the modules from package.json
	var gulp = require( 'gulp' ),
	plumber = require( 'gulp-plumber' ),
	autoprefixer = require('gulp-autoprefixer'),
	watch = require( 'gulp-watch' ),
	jshint = require( 'gulp-jshint' ),
	stylish = require( 'jshint-stylish' ),
	uglify = require( 'gulp-uglify' ),
	rename = require( 'gulp-rename' ),
	notify = require( 'gulp-notify' ),
	include = require( 'gulp-include' ),
	sass = require( 'gulp-sass' ),
	browserSync = require('browser-sync').create(),
	critical = require('critical'),
	zip = require('gulp-zip');
	var config = {
	nodeDir: './node_modules'
	}
	// Default error handler
	var onError = function( err ) {
	console.log( 'An error occured:', err.message );
	this.emit('end');
	}
	// JS to watch
	var jsFiles = [
	'./js/**/*.js',
	'!./js/dist/*.js',
	];
	// Sass files to watch
	var cssFiles = [
	'./sass/**/*.scss'
	];
	// automatically reloads the page when files changed
	var browserSyncWatchFiles = [
	'./*.min.css',
	'./js/**/*.min.js',
	'./**/*.php'
	];
	// see: https://www.browsersync.io/docs/options/
	var browserSyncOptions = {
	watchTask: true,
	proxy: "http://sp:8888/"
	}
	// Zip files up
	gulp.task('zip', function () {
	return gulp.src([
	'*',
	'./css/*',
	'./fonts/*',
	'./images/**/*',
	'./inc/**/*',
	'./js/**/*',
	'./languages/*',
	'./sass/**/*',
	'./template-parts/*',
	'./templates/*',
	'!bower_components',
	'!node_modules',
	], {base: "."})
	.pipe(zip('strappress.zip'))
	.pipe(gulp.dest('.'));
	});
	// Jshint outputs any kind of javascript problems you might have
	// Only checks javascript files inside /src directory
	gulp.task( 'jshint', function() {
	return gulp.src( './js/src/*.js' )
	.pipe( jshint() )
	.pipe( jshint.reporter( stylish ) )
	.pipe( jshint.reporter( 'fail' ) );
	})
	// Concatenates all files that it finds in the manifest
	// and creates two versions: normal and minified.
	// It's dependent on the jshint task to succeed.
	gulp.task( 'scripts', gulp.series('jshint'), function() {
	return gulp.src( './js/manifest.js' )
	.pipe( include() )
	.pipe( rename( { basename: 'scripts' } ) )
	.pipe( gulp.dest( './js/dist' ) )
	// Normal done, time to create the minified javascript (scripts.min.js)
	// remove the following 3 lines if you don't want it
	.pipe( uglify() )
	.pipe( rename( { suffix: '.min' } ) )
	.pipe( gulp.dest( './js/dist' ) )
	.pipe(browserSync.reload({stream: true}))
	.pipe( notify({ message: 'scripts task complete' }));
	});
	// Sass - Creates a regular and minified .css file in root
	gulp.task('sass', function() {
	return gulp.src('./sass/style.scss')
	.pipe(plumber())
	.pipe(sass({
	errLogToConsole: true,
	precision: 8,
	noCache: true,
	//imagePath: 'assets/img',
	includePaths: [
	config.nodeDir + '/bootstrap/scss',
	]
	}).on('error', sass.logError))
	.pipe(autoprefixer())
	.pipe(gulp.dest('.'))
	.pipe(sass({ outputStyle:'compressed'}).on('error', sass.logError))
	.pipe(rename( { suffix: '.min' } ) )
	.pipe(gulp.dest('.'))
	.pipe(browserSync.reload({stream: true}))
	.pipe(notify({ title: 'Sass', message: 'sass task complete' }));
	});
	// Generate & Inline Critical-path CSS
	gulp.task('critical', function (cb) {
	critical.generate({
	base: './',
	src: 'http://sp:8888/',
	dest: 'css/home.min.css',
	ignore: ['@font-face'],
	dimensions: [{
	width: 320,
	height: 480
	},{
	width: 768,
	height: 1024
	},{
	width: 1280,
	height: 960
	}],
	minify: true
	});
	});
	// Starts browser-sync task for starting the server.
	gulp.task('browser-sync', function() {
	browserSync.init(browserSyncWatchFiles, browserSyncOptions);
	});
	// Start the livereload server and watch files for change
	gulp.task( 'watch', function() {
	// don't listen to whole js folder, it'll create an infinite loop
	gulp.watch( jsFiles, gulp.parallel('scripts') )
	gulp.watch( cssFiles, gulp.parallel('sass') );
	} );
	gulp.task( 'default', gulp.parallel('watch', 'browser-sync'));

view raw gulpfile.js hosted with by GitHub

You can compare it to my old Gulp 3 file here: https://github.com/braginteractive/StrapPress/blob/7c28a362bf9986f210a0c6f4ba3d7c17c7608a34/gulpfile.js

I also took the opportunity to merge, delete, and clean up some of the tasks. Feel free to grab the code and use it in your projects.

If you have further optimizations for the file, comment below or on the Gist.

Enjoy!