Gulp 并行 Gulp ()或串行 Gulp ()中的条件 Gulp 任务

mmvthczy  于 2022-12-08  发布在  Gulp
关注(0)|答案(4)|浏览(153)

管道内的条件任务信息太多(如“gulp-if”插件),但实际上它不是“条件任务”:这是“条件插件使用”,一个任务可以使用多个插件。2下面是如何有条件地运行任务,而不是在管道内(例如,在gulp.paralell()内)
假设任务名称可以包含空格,以提供易于理解的任务含义。

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

eqzww0vc1#

gulp4.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();
  }
));
xfb7svmp

xfb7svmp2#

对于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()
    }
  }
}
  • 作为第一个参数,此帮助器采用函数形式的条件。条件函数在任务执行开始时运行,因此您可以在条件函数中检查前面步骤的输出。
  • 第二个参数指定要运行的任务,可以是gulp.parallel()gulp.series()作为参数接受的相同值,即字符串、函数引用或来自另一个gulp.parallel()gulp.series()的返回值。
  • 返回一个函数,该函数可以作为第二个参数传递给gulp.task(),也可以作为gulp.parallel()gulp.series()调用的参数传递给gulp.task()

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

  • 嵌入在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()引用
const manyTasks = gulp.parallel(task1, task2, task3)
gulp.task('default', gulpTaskIf(
  function () {
    return Math.random() < 0.5;
  },
  manyTasks)
nkhmeac6

nkhmeac63#

我有一个插件数组,在这里我做了一个简单的If查询,然后展开数组,见这里的第199行。

  • 根据Gulp 4改编 *

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

rfbsl7qr

rfbsl7qr4#

非常简单,不需要辅助函数:

gulp.task('Build', function() {
  const tasks = ['Preprocess HTML', 'Preprocess styles'];
  if(checkSomeCondition()) tasks.push('some Task');
  return gulp.parallel(tasks);
}());

线索是在最后一行调用函数-它将返回一个调整后的gulp。parallel task -我正在使用它来处理命令行参数(yargs)

**警告:**这将在执行第一个任务之前执行,并且在运行“生成”以外的其他任务时也将执行。在实现逻辑时请记住这一点;)

相关问题