[SPFx] Extending Gulp and running tasks in series (or in parallel)

To add a new custom Gulp task, we must go through the SPFx build system, which is defined in the package “@microsoft/sp-build-web”

The build object allows us to call a function “task” and set the definition of our task. It would be something similar to this:

However, imagine that we just want to execute a couple of Tasks, but sequentially. Then, we must use the function “serial” of the build object. The following code snippet runs the tasks “task-1” and “task-2” together and sequentially:

var task1 = build.task("task-1", {
            execute: (config) => {
                        console.log("Fist step");
                        return new Promise((resolve, reject) => {
                                    const deployFolder = require('./config/prepare-deploy.json');
                                    const folderLocation = `./${deployFolder.deployCdnPath}/**/*.js`;
                                    return gulp.src(folderLocation)
                                    .on('finish', resolve);
                        });
            }
});

var task2 = build.task("task-2", {
            execute: (config) => {
                        console.log("Second step");
                        return new Promise((resolve, reject) => {
                                    const deployFolder = require('./config/prepare-deploy.json');
                                    const folderLocation = `./${deployFolder.deployCdnPath}/**/*.js`;
                                    return gulp.src(folderLocation)
                                    .on('finish', resolve);
                        });
            }
});

var tasksSerie = build.serial([task1, task2]);

build.task("tasks-serie", serie);

If we run the task, we will see the expected result:

If we want to run the tasks in parallel, the mechanics are the same, but using the function “parallel” of the build.object.

Hope this helps!