Speeding up Gulp copies with gulp-prune and gulp-newer

Recently some of our website development process at work was causing issues for team members on slower hardware.

During dev of our custom WordPress themes using Gulp we copy Advanced Custom Fields component definitions from our src folder into the theme where they’re used (we write them using StoutLogic’s ACF Builder). However the process was a little clunky, essentially deleting the entire components folder in the theme and then copying every PHP file from within the components src folder back into the theme. This has always been a bit of a bottleneck for us as we add more and more components to a site. This is the previous setup:

function cleanComponents() {
	return del([
		'wp-content/themes/our-theme/components',
	]);
}

function componentPhp() {
	return gulp.src('components/**/*.php', { cwd: 'src' })
		.pipe(gulp.dest('components', { cwd: 'wp-content/themes/our-theme' }));
}

There was a lot of redundant copying going on with this as more often than not we’re wanting to copy one, two files tops and to try and handle it better we added a delay to the watch in gulp to give it time to finish. It was less than ideal.

After a bit of a searching around I discovered gulp-prune and combined it with gulp-newer which we were already using and this helped out measurably (3x quicker on my already fast M1 but noticeably so on older Windows machines too). We can delete the cleanComponents function above and integrate it into our componentPhp function like so:

const prune = require('gulp-prune');
const newer = require('gulp-newer');

function componentPhp() {
	return gulp.src('components/**/*.php', { cwd: 'src' })
		.pipe(prune('wp-content/themes/our-theme/components'))
		.pipe(newer('wp-content/themes/our-theme/components'))
		.pipe(gulp.dest('components', { cwd: 'wp-content/themes/our-theme' }));
}

What we’re doing here is having gulp-prune delete any files in our WordPress components folder that don’t match the src components folder instead of deleting the entire folder and its contents. Then we’re checking with gulp-newer for any files newer in the src components folder against the WordPress components folder and only piping those through. This means we’re only ever deleting and copying a couple of files each time we save instead of potentially hundreds.

Ultimately you could work on your PHP entirely within the theme folder too but in our setup we have associated JavaScript and Sass in the folder too which we don’t copy across and process separately. Anyway, a helpful little change I thought I’d document. Maybe it can help you in the future too.