How To Run Several Gulp Functions Sequentially?

To register a gulp task I use the following code: gulp.task('test-module', function() { return testModule(__dirname); }); This is testModule function : export function testMod

Solution 1:

Your functions, especially the buildModule and buildTestModule are doing something asynchronous inside them. So runModuleTests is called before they finish as you know. I've simulated this behavior with the code below:

const gulp = require('gulp');

// gulp.task('test-module', function() {
gulp.task('default', function() {
  returntestModule(__dirname);
});

functiontestModule(modulePath) {
  let task1 = buildModule(modulePath, true);
  let task2 = buildTestModule(modulePath);
  let task3 = runModuleTests(modulePath);
  return [task1, task2, task1];
}

functionbuildModule (path)  {

  setTimeout(() => {
    console.log("in buildModule, should be step 1");
  }, 2000);
};

functionbuildTestModule (path)  {

    setTimeout(() => {
      console.log("in buildTestModule, should be step 2");
    }, 2000);
};

functionrunModuleTests (path)  {

  console.log("in runModuleTests, should be step 3");
};

I've put in delays in the first two functions to show what is happening when the earlier functions are asynchronous. The result:

in runModuleTests, should be step3in buildModule, should be step1in buildTestModule, , should be step2

One way to fix this is to use async/await and promises if you can. so try this code:

gulp.task('test-module', function(done) {
    testModule(__dirname);
    done();
});

// function testModule(modulePath) {asyncfunctiontestModule(modulePath) {

  let task1 = awaitbuildModule(modulePath, true);
  let task2 = awaitbuildTestModule(modulePath);
  let task3 = awaitrunModuleTests(modulePath);

  return [task1, task2, task1];
}

functionbuildModule (path)  {
  returnnewPromise(resolve => {

    setTimeout(() => {
        resolve(console.log("in buildModule, should be step 1"));
    }, 2000);

    // put your functionality here without the setTimeout() call above
  });
};

functionbuildTestModule (path)  {
  returnnewPromise(resolve => {

    setTimeout(() => {
      resolve(console.log("in buildTestModule, , should be step 2"));
    }, 2000);

    // put your functionality here without the setTimeout() call above
  });
};

functionrunModuleTests (path)  {
  returnnewPromise(resolve => {

   // put your gulp.src pipeline hereconsole.log("in runModuleTests, should be step 3");
 });
};

Results:

in buildModule, should be step1in buildTestModule, , should be step2in runModuleTests, should be step3

So make your functions return Promises and then await their result. This will guarantee that the functions return in the right order.

Solution 2:

In your gulp task method you can have a second argument where you define the task dependencies, that means that the dependencies are run before your main task.

Example:

gulp.task('after', ['before1', 'before2', ...], function() {

});