Gulp任务顺序

Jam*_*eel 5 rsync gulp

我在执行几个吞咽任务时遇到了一些麻烦。我已经尝试了一切并遵循了文档,但似乎没有任何效果。希望有人可以提供帮助。

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

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

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

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

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

ash*_*ell 3

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

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

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

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

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 );
    });
  });
});
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

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

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

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

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

看看你的要点,在你的任务中添加几个缺少的返回语句可能只是解决问题,但作为一个例子,这就是我的“开发”任务对于我的工作项目的样子......

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
  );
});
Run Code Online (Sandbox Code Playgroud)

另请参考我的“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
  );
});
Run Code Online (Sandbox Code Playgroud)

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

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

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

  done();
});
Run Code Online (Sandbox Code Playgroud)

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