如何依次运行几个gulp函数？

Question

To register a gulp task I use the following code:

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

This is testModule function :

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

The problem with this code is that runModuleTests(modulePath) is called BEFORE buildModule(modulePath, true) and buildTestModule(modulePath) generate files. So, when runModuleTests(modulePath) is executed there are no files for testing and no files with tests.

I tried also

import gulpall from 'gulp-all';

export function testModule(modulePath) {
    return gulpall(
            buildModule(modulePath, true),
            buildTestModule(modulePath),
            runModuleTests(modulePath)
    );
}

but the result is the same. How can I fix it?

Answer 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() {
  return testModule(__dirname);
});

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

function buildModule (path)  {

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

function buildTestModule (path)  {

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

function runModuleTests (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 step 3
in buildModule, should be step 1
in buildTestModule, , should be step 2

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) {

async function testModule(modulePath) {

  let task1 = await buildModule(modulePath, true);
  let task2 = await buildTestModule(modulePath);
  let task3 = await runModuleTests(modulePath);

  return [task1, task2, task1];
}

function buildModule (path)  {
  return new Promise(resolve => {

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

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

function buildTestModule (path)  {
  return new Promise(resolve => {

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

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

function runModuleTests (path)  {
  return new Promise(resolve => {

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

Results:

in buildModule, should be step 1
in buildTestModule, , should be step 2
in runModuleTests, should be step 3

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

Answer 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() {

});