Gulp 任务未按顺序运行

Question

我正在关注官方文档，但我的 gulp 任务没有按顺序运行。

gulp.task("mytask", ["foo", "bar", "baz"]);

gulp.task("foo", function (callback) {
  gulp
    .src("...")
    .pipe(changed("..."))
    .pipe(gulp.dest(function (file) {
      // ...stuff
      return "...";
    }))
    .on("end", function() {
      // ...stuff
      callback();
    });
});

gulp.task("bar", function (callback) {
  //...
});

gulp.task("baz", function (callback) {
  //...
});

但我的输出是这样的：

Starting 'mytask'...
Starting 'foo'...
Starting 'bar'...                   // <-- foo is not done yet!
Finished 'foo'
Finished 'bar'
Starting 'baz'...
Finished 'baz'
Finished 'mytask'

如何让它们按顺序运行？

Answer 1

应更新此答案以反映 Gulp 4 以系列方式运行任务的方式。

如果您希望 Gulp 任务以一系列方式运行，您应该使用 gulp.series 来运行它们，如果您希望它们并行运行 gulp.parallel。

在使用 Gulp 系列时，您将执行以下操作：

gulp.task("mytask", gulp.series(foo, bar, baz));

那些其他任务可能不再是任务，而是常量，比如

  const foo = () => {
     return gulp.src("...")
     .pipe(changed("..."))
     .pipe(gulp.dest(function (file) {
      // ...stuff
      return "...";
    }));
  }

因此该系列列出了常量而不是某些字符串的原因。在迁移到 Gulp 4 时可能会出现其他问题，但是像这样的简单 gulp 文件的修复很容易制作。

gulp 4 https://codeburst.io/switching-to-gulp-4-0-271ae63530c0的简单教程

Answer 2

如果您希望它们串联运行，您当前必须使用任务依赖系统，例如：

gulp.task("mytask", ["foo", "bar", "baz"]);

gulp.task("foo", function (callback) {
  //...
  callback(...);
});

gulp.task("bar", ['foo'], function (callback) {
  //...
  callback(...);
});

gulp.task("baz", ['bar'], function (callback) {
  //...
  callback(...);
});

它很笨重。我认为这将在未来的版本中得到解决。

根据情况您可以return a promise or event stream 而不是传入并调用回调。

我想我应该提到run-sequence 模块是目前的一个选项。但是上面说明的任务依赖系统是目前gulp自己提供的机制。请参阅this comment re：run-sequence 和 gulp 中任务排序的未来。