Task Runner Gulp Update in Visual Studio

After looking over my Gulp script, it definitely required some updates. In this post, I review what's required to update it to the latest version

After writing the post about how to use Visual Studio's Task Runner a little over a year ago, I was looking over my analytics and noticed it was becoming more popular than I expected.

With that said, I thought this would definitely be a good time to prepare some future Task Runner posts.

To kick off the first Task Runner post, I need to bring my gulpfile.js up to modern times with this new format.

Keeping Up with the Times

I was looking over the GulpJs docs and noticed something strange: the tasks in my gulpfile.js didn't match the latest structure in the docs.

Yeah...I was a little behind.

When I initially found out about Gulp, I was skeptical to use it, but decided to create a sample gulpfile.js. Once it was working, I wrote a quick post on Visual Studio's front-end tooling back in 2016.

The Gulp docs back then (at archive.org) explained this was the way to write your tasks. I thought, if it's not broke, don't fix it and I continued on.

Of course, with time, everything changes.

The Old Way

As you could see in the link above at archive.org, this was the way to write the tasks.

var gulp = require('gulp');

gulp.task('testTask', function (done) {
    console.log('Hello World! We finished a task!');
    done();
});

gulp.task('default', gulp.series(['testTask']));

Since this was working, I didn't change it...until my front-end tasks started taking a little longer.

I continued to build my library of client-side tasks and noticed they were getting bigger.

I needed a faster (and better) way to structure and execute the tasks.

The New Way

I was looking for a solution and the best place to start was the gulp docs. Then I noticed the tasks format changed.

So I updated my gulpfile.js.

const { series, parallel } = require('gulp');

const gulp = require('gulp');

function testTask(done) {
    console.log('Hello World! We finished a task!');
    done();
}

exports.build = series(
    testTask,
    cleanLibraries,
    ts_clean,
    js_clean,
    sass_clean,
    sass_public_clean,
    public_ts_clean,
    publicJs_clean,
    parallel(
        copyLibraries,
        series(typeScriptTranspile, js, publicTypeScriptTranspile, publicJs),
        sass,
        sass_public
    )
);

I've added a couple other tasks as an example.

The two new composition types in Gulp are series() and parallel(). Series is used processing tasks in a synchronous order where parallel executes tasks in an asynchronous fashion.

The good news is you can combine them to streamline and optimize your process even faster.

As you can see in the series list, I perform a "clean" on my environment before I kick off parallel processes. The processes are able to run independently from each other and won't step on other tasks while processing. These tasks include TypeScript compilations, JS Bundling/Minification (AFTER TypeScript compilation), and SASS compilation.

If everything is setup properly, you'll see your clean up processes execute rather quickly and then see your parallel processes kick off.

Think of the parallel tasks as a Task.WhenAll() in C#.

Conclusion

In this post, we updated our gulpfile.js to something a little more modern and explained a way to optimize your front-end pipeline using series() and parallel() composition types.

Do you use the Task Runner in Visual Studio? Do you have some recipes/tasks to ease your development during deployment? Post your comments below and let's discuss.