Tobias Williams

Updating my gulp tasks to gulp 4 format.

I have a tendancy to set and forget build tools. They work, or seem to, why is a question for the philosophers. However, with the change from gulp 3 to 4 I was keen to make sure I had at least a basic understanding of what that looked like, and make sure that I was taking advantage of what gulp 4 could offer.

One of the most useful features is the ability to run tasks in series, or in parallel. The more complex or larger the build, the longer build tasks can take. Tasks that can occur at the same time should now use the parallel syntax, allowing us to reduce the build time.

gulp.parallel('scripts', 'styles')

Series, by contrast, allows you to set the order of the tasks so you can ensure one is completed before the next is run.

gulp.series('scripts', 'styles')

So interesting, it seems like I was partly there. I was using the parallel and series syntax. There was an opportunity for me to use named functions vs the node 3.9 gulp.task declarations I was using.

My old task:

gulp.task('min-image', function minImageTask() {
  return gulp
    .src('src/img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});


The updated task:

function minImageTask() {
  return gulp
    .src('src/img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
}


exports.images = minImageTask;


Some things to note, any exported functions will be registered into gulp's task system. So above we are exporting images, and in our package.json file we have:

scripts {
  "images": "gulp images",
}


So you can see we have access to the task in a similar way that we did in gulp 3.9.

For my build task which is the only complex multitask I added a const to store the task:

const build = gulp.parallel(lintScss, lintJs, js, css, minImageTask);
exports.build = build;