javascript - Gulp 任务中 `return` 语句和 `callback` 引用的用途

Question

我无法让 gulp run-sequence 执行我给它的两个函数(它只会执行其中一个。我有这样的东西:

gulp.task('wire', function(){
  gulp.src('./index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('.'));
});

var filesToInject = ['./app/**/*.js', './app/**/*.css'];
gulp.task('inject', function (){
  var target = gulp.src('./index.html');
  var sources = gulp.src(filesToInject, {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('.'));
});

gulp.task('wire-inject',  function(callback){
    sequence('wire', 'inject', callback);
});

那只会运行 inject 任务。只有当我在 wire 任务中的 gulp.src 之前添加一个 return 时，它才会执行。我还在两个函数参数中添加了回调，并将其传递给两个任务中的最后一个管道 the documentation .

gulp.task('wire', function(callback){
  gulp.src('./index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('.'), callback);
});

var filesToInject = ['./app/**/*.js', './app/**/*.css'];
gulp.task('inject', function (callback){
  var target = gulp.src('./index.html');
  var sources = gulp.src(filesToInject, {read: false});
  return target.pipe(inject(sources))
    .pipe(gulp.dest('.'), callback);
});

这并没有引发任何错误，但是如果我把它取出来，它也不会改变任何东西。这个 return 语句做了什么神奇地让我的序列完全运行。文档中的这些回调是什么，我只是在没有括号的情况下传递了一个引用来执行它们？即使它们看起来什么都不做，我还需要它们吗？

Answer 1

Gulp 需要知道异步任务何时完成。您有 3 种方法可以做到这一点:

1. 返回一个事件流，这是当你有 return gulp.src(...).pipe(...); 时所做的事情在您的任务功能中。

2. 返回 promise 。

3. 有定义你任务的函数带参数。 Gulp 将使用回调调用您的函数，您应该在任务结束时调用该回调。

如果您不这样做，那么 Gulp 将不会知道该任务是异步的。因此，它会在其函数返回后立即考虑完成任务。这会带来各种各样的后果。 Gulp 可以在任务完成之前退出。或者它可以在任务 A 完成之前启动依赖于任务 A 的任务 B。在某些情况下，您可能不会立即发现问题，但随着您的 gulpfile 变得越来越复杂，您出现不良行为的机会就会增加。 run-sequence并不特殊:它需要知道任务何时完成才能正确完成其工作。

请注意 callback在您在问题中显示的这段代码中是无用的:

return target.pipe(inject(sources))
    .pipe(gulp.dest('.'), callback);

callback不会被调用。将其替换为 function () { console.log("Hello!"); callback(); } .你不会看到 Hello!在控制台上，因为未调用回调。但是，代码确实可以正常工作，因为您返回了流。 Gulp 使用您返回的流来确定任务是否结束，而不是回调(无论如何都不会调用)。