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

时间:2018-11-13 15:15:21

标签: javascript gulp

要注册一个gulp任务,我使用以下代码:

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

这是testModule函数:

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

此代码的问题是runModuleTests(modulePath)buildModule(modulePath, true)之前被称为,而buildTestModule(modulePath)则在生成文件。因此,执行runModuleTests(modulePath)时,没有要测试的文件,也没有带有测试的文件。

我也尝试过

import gulpall from 'gulp-all';

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

,但结果相同。我该如何解决?

2 个答案:

答案 0 :(得分:1)

您的函数,尤其是buildModulebuildTestModule在它们内部执行异步操作。因此runModuleTests会在您知道之前被调用。我使用以下代码模拟了这种行为:

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");
};

我在前两个函数中添加了延迟,以显示早期的函数异步时发生的情况。结果:

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

解决此问题的一种方法是使用async / await,并承诺是否可以。因此,请尝试以下代码:

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");
 });
};

结果:

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

因此,使您的函数返回Promises,然后等待其结果。这样可以确保函数以正确的顺序返回。

答案 1 :(得分:0)

在gulp任务方法中,您可以使用第二个参数定义任务依赖项,这意味着依赖项在主任务之前运行。

示例:

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

});