Question

我在完成一些gulp任务时遇到了一些麻烦。我已经尝试了一切，并按照文档，但似乎没有任何工作。希望有人可以提供帮助。

我要做的是发生sass缩小，然后将结果rsync到本地vagrant文件夹（不是远程服务器），然后重新加载浏览器同步。

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

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

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

我有这个工作的唯一方法是将rsync管道放到sass放大的末尾，并将其包装在gulp中 - 如果使用服务器：true变量，所以只有当它知道它在a上运行时才会执行rsync VM。不理想。

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将等待承诺进入已解决状态，然后再将该任务指示为已完成。示例:(不完美只是为了得到重点）

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任务的样子。当您执行的操作不是传统的基于流的gulp任务时，选项2和3更适合。

接下来是将一个任务的“依赖”设置为另一个任务。 gulp文档显示了这一点：

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

现在我不知道当前的状态，但是这些依赖关系任务没有以正确的顺序运行存在一些问题。这最初是由一个gulp依赖项（我相信的orchestrator）的问题引起的。 NPM土地上的一位绅士在过渡期间制作了一个漂亮的小包装，同时制作了虫子。我开始用它来订购我的任务，但没有回头。

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
  );
});

另外，作为参考，我的“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.task( "watch-stuff", function( done ){
  gulp.watch( watchGlob )
    .on( "change", function( event ){ /* process file */ });

  done();
});

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

Answer 2

你走了，我相信它现在应该有效。如果不让我知道，我可能会写错字。 Your gist fixed

我认为你正在打击（我没有足够的声望点来发布链接，google问题＃96），这已经在4.x中修复，但尚未解决:-)。也就是说，检查这个hack out：My post about Gulp v3.x bug

Gulp任务订单

2 个答案: