Gulp任务顺序

Question

我在执行几个 gulp 任务时遇到了一些问题。我已经尝试了一切并遵循了文档，但似乎没有任何效果。希望有人能帮忙。

我想做的是进行 sass 缩小，然后将结果同步到本地 vagrant 文件夹(不是远程服务器)，然后重新加载浏览器同步。

我遇到的问题是我正在与 gulp 想要一起运行所有任务的事实作斗争。我需要它们一个接一个地发生。所有任务都是独立工作的，我只是很难让它们按顺序运行。我尝试过回调并玩依赖，但我显然错过了一些东西。

我的设置很复杂，我的所有任务都在单独的 js 文件中，但我尝试将我所拥有的内容合并到这个单一的 github 要点中，以便人们可以提供帮助。感谢您的帮助。

https://gist.github.com/CodeStalker/9661725dcaf105d2ed6c

我让它工作的唯一方法是将 rsync 通过管道传输到 sass 放大的末尾，并使用 server: true 变量将其包装在 gulp-if 中，这样它只在知道它运行在虚拟机。不理想。

Answer 1

这是人们在使用 Gulp 时遇到的常见问题，尤其是来自 Grunt 时。 Gulp 是最大程度的异步，它总是希望同时做尽可能多的事情。

让任务按顺序运行的第一步是让 gulp 知道你的任务何时结束，这可以通过几种不同的方式来完成。

1) 返回一个流，gulp 将等待流的“结束”事件作为完成该任务的触发器。示例:

gulp.task( "stream-task", function(){
  return gulp.src( srcGlob )
    .pipe(sass())
    .pipe(compressCSS())
    .pipe(gulp.dest( destGlob ));
});

2) 返回一个 Promise，gulp 将等待 Promise 进入已解决状态，然后再通知任务已完成。示例:(仅为了表达要点并不完美)

gulp.task( "promise-task", function() {
  return new Promise(function(resolve, reject){
    fs.readFile( "filename", function( err, data ){
      if( err ){ return reject(err); }
      return resolve( data );
    });
  });
});

3) 调用任务回调，如果函数不返回任何内容，但函数签名带有参数，则该参数将是一个回调函数，您可以调用该函数来表示任务已完成。示例:

gulp.task( "cb-task", function( done ){
  fs.readFile( "filename", function( err, data ){
    // do stuff, call done...
    done();
  });
});

大多数情况下，您将返回像示例 1 这样的流，这就是典型的 gulp 任务的样子。选项 2 和 3 更适合当您执行的操作并非真正基于传统流的 gulp 任务时。

下一步是设置一项任务对另一项任务的“依赖性”。 gulp 文档显示了这样做的方式:

gulp.task( "some-task-with-deps", [ "array-of-dep", "task-names" ], function(){ /* task body */ });

现在我不知道当前状态，但这些依赖项任务未按正确的顺序运行存在一些问题。这最初是由 gulp 的依赖项之一(我相信是协调器)的问题引起的。 NPM 领域的一位好心绅士制作了一个漂亮的小包，供在解决错误时临时使用。我开始使用它来安排我的任务，并且没有回头。

https://www.npmjs.com/package/run-sequence

文档很好，所以我不会在这里详细介绍。基本上，run-sequence 可以显式地排序您的 gulp 任务，只要记住，如果您没有为每个任务实现上述三个选项之一，它就不起作用。

看看你的要点，在你的任务中添加几个缺少的 return 语句可能会成功，但作为一个例子，这就是我工作中的项目的“开发”任务......

gulp.task( "dev", function( done ){
  runSequence(
    "build:dev",
    "build:tests",
    "server:dev",
    [
      "less:watch",
      "jscs:watch",
      "lint:watch",
      "traceur:watch"
    ],
    "jscs:dev",
    "lint:dev",
    "tdd",
    done // <-- thats the callback method to gulp let know when this task ends
  );
});

另外，作为引用，我的“build:dev”任务是 run-sequence

的另一种使用

gulp.task( "build:dev", function( done ){
  runSequence(
    "clean:dev",
    [
      "less:dev",
      "symlink:dev",
      "vendor:dev",
      "traceur:dev"
    ],
    done // <-- thats the callback method to let know when this task ends
  );
});

如果任务需要按顺序运行，则任务名称将作为其自己的参数添加到 runSequence(如果它们不冲突)，则将它们作为数组发送以使任务同时运行时间并加快构建过程。

关于监视任务需要注意的一点!通常，监视任务无限期地运行，因此尝试从它们返回“无限”流可能会让 gulp 认为任务永远不会结束。在这种情况下，我将使用回调方法让 gulp 认为任务已完成，即使它仍在运行，例如...

gulp.task( "watch-stuff", function( done ){
  gulp.watch( watchGlob )
    .on( "change", function( event ){ /* process file */ });

  done();
});

有关监视任务以及如何进行增量构建的更多信息，请查看我前几天写的答案，Incremental gulp less build