Gulp任务订单

2019年8月5日 132次阅读

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

我想要做的是发生sass缩小,然后将结果rsync到本地vagrant文​​件夹(不是远程服务器),然后重新加载浏览器同步.

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

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

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

我有这个工作的唯一方法是将rsync传输到sass放大的末尾,并将其包装在gulp中 – 如果使用server：true变量,那么只有当它知道它在VM上运行时它才会执行rsync.不理想.

最佳答案 这是人们与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 docs显示这是你这样做的方式：

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

点赞