gulp.paralell()或gulp.series()中的条件gulp任务

Question

太多关于管道内部条件任务的信息(例如，"gulp-if“插件)。然而，实际上它不是“有条件的任务”：它是“有条件的插件使用”，一个任务可以使用多个插件。下面是如何有条件地运行不在管道内(例如，在gulp.paralell()内)的任务。

假设任务名称可以包含空格，以提供易于理解的任务含义。

gulp.task('Build', gulp.paralell(
    'Preprocess HTML',
    'Prepeocess styles',
    done => {
        if(checkSomeCondition()){
            runTask('some Task') // but how?
        }
        else {
            done();
        }
    }
))

Answer 1

Gup4.0的美妙之处在于，您的任务可以只是函数，因此可以使用以下方法：

gulp.task('Preprocess HTML', function () {
  console.log("in Preprocess HTML");
  return gulp.src('./');
});

您可以使用上面的版本(“旧方法”)，也可以使用下面的新方法。

我在这里展示了两个使用两个版本的任务，但我个人不会将它们混合在一起。

// function PreprocessHTML() {
//   console.log("in Preprocess HTML");
//   return gulp.src('./');
// }

function PreprocessStyles() {
  console.log("in Preprocess styles");
  return gulp.src('./');
}

function testTaskTrue() {
  console.log("in testTaskTrue");
  return gulp.src('./');
}

function testTaskFalse() {
  console.log("in testTaskFalse");
  return gulp.src('./');
}

function checkSomeCondition() {
  console.log("in checkSomeCondition");
  return false;
}

//    Again, I definitely wouldn't mix the two versions of tasks as shown below.
//    Just here for demonstration purposes.

gulp.task('test', gulp.parallel( 'Preprocess HTML',  PreprocessStyles,
  done => {
    if (checkSomeCondition()) {

        // so testTaskTrue can be any gulp4.0 task, easy to call since it just a function

      testTaskTrue();
    }
    else {
      testTaskFalse();
    }
    done();
  }
));

Answer 2

对于gulp 4，首先创建这个辅助函数：

function gulpTaskIf(condition, task) {
  task = gulp.series(task) // make sure we have a function that takes callback as first argument
  return function (cb) {
    if (condition()) {
      task(cb)
    } else {
      cb()
    }
  }
}

• 作为它的第一个参数，这个帮助器接受一个函数形式的条件。condition函数在任务执行开始时运行，因此您可以检查condition函数中先前步骤的输出。
• 第二个参数指定要运行的任务，可以是gulp.parallel()或gulp.series()作为参数接受的相同值，即字符串、函数引用或来自另一个gulp.parallel()或gulp.task()的返回值，该函数可以作为第二个参数或作为参数传递给gulp.parallel()或gulp.series()调用。

<gulp.parallel()>F215

示例(第一个匹配问题)：

• 嵌入在gulp.parallel()或gulp.series()中，通过名称

调用任务

gulp.task('Build', gulp.parallel(
    'Preprocess HTML',
    'Prepeocess styles',
    runTaskIf(checkSomeCondition, 'some Task')
))

• 作为任务，按名称

调用任务

function myTask() {
  return gulp.src(...)
    ...
    .dest(...)
}
gulp.task('my-task', myTask)
gulp.task('default', gulpTaskIf(
  function () {
    return Math.random() < 0.5; // example condition
  },
  'my-task')

• 作为独立任务，通过函数引用

调用任务

function myTask() {
  return gulp.src(...)
    ...
    .dest(...)
}
gulp.task('default', gulpTaskIf(() => Math.random() < 0.5, myTask)

引用

• 作为独立任务，调用gulp.parallel()或gulp.series() reference

const manyTasks = gulp.parallel(task1, task2, task3)
gulp.task('default', gulpTaskIf(
  function () {
    return Math.random() < 0.5;
  },
  manyTasks)

Answer 3

我有一个插件数组，其中我执行了一个简单的If查询，然后展开该数组，请参见第199行here。

基于Gulp 4。

对于构建过程，我将Const更改为Let，并使用If查询它，您可以看到here。