最近在写一个项目，基于gulp做一个co原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。mponents的工作流框架，通过这个框转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net架去add，build，preview，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。test，publish，目前还在开发阶【作者：唐霜】未经授权，禁止复制转载。段，不过已经实现了一些基本功能，而且开发【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。出的pipe-queue本文版权归作者所有，未经授权不得转载。和本文版权归作者所有，未经授权不得转载。pipe-matrix未经授权，禁止复制转载。也是基于这个工作流实现的。不过这两个组件【转载请注明来源】【原创不易，请尊重版权】原本是为了实现我的这个框架，结果在倒腾框转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】架的过程中诞生了这两个组件，而它们又是在未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。框架中诞生的，真说不清是“鸡生蛋还是蛋生【原创内容，转载请注明出处】未经授权，禁止复制转载。鸡”。
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】在这个过程里面，躺了很多stream p转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ipe的坑，所以打算今天就来慢慢谈谈。事【版权所有，侵权必究】原创内容，盗版必究。先说好，我在写的时候思维乱跳，可能会穿插【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。一些吐槽，做好心理准备。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。gulp和grunt的本质区别本文版权归作者所有，未经授权不得转载。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net我之前是在grunt上跑任务，改起来也很著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】顺手，思维完全是清晰的，看着一个个组件在著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。自己的工作流下面出来，心中也暗爽出一种上著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】帝视角，这种“谜之自信”在我进入gulp【本文受版权保护】本文作者：唐霜，转载请注明出处。开发的第三天被打碎。
【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。gulp和grunt的本质区别在于：本文版权归作者所有，未经授权不得转载。gulp是对文件流的一种工作流，而且完全【转载请注明来源】未经授权，禁止复制转载。遵守node的异步思想。而grunt嘛……并没有什么node的本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】思想，如果一定要尊称一下，可以称之为“工原创内容，盗版必究。【本文受版权保护】作流的祖先”吧。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【原创不易，请尊重版权】gulp的所有的一切都是围绕文件转，你在本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。gulp开发里面要动的东西，永远都是文件【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，无论做什么事，到最后你都是为了把文件怎未经授权，禁止复制转载。未经授权，禁止复制转载。样怎样。比如你gulp.src是为了弄过【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。来文件，gulp.dest是为了搞出到文本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】件，gulp.watch是为了监视文件，【版权所有，侵权必究】转载请注明出处：www.tangshuang.net对不起，“文件”不是一个人，真的是计算机【版权所有，侵权必究】【本文受版权保护】里面的file。
【未经授权禁止转载】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。但是，怎么搞文件呢？gulp抓住了内在核原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。心，那就是流（stream）这个东西，虽【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。然在node中stream有多种，但是在本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】gulp里面，主要就是搞file str【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。eam，当然，这里面也有file buf未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。fer的戏份。但是不管怎样，gulp.s【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netrc完，你一定要回到node的pipe机【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net制，通过pipe去对文件流进行处理。处理【本文受版权保护】转载请注明出处：www.tangshuang.net文件流，是gulp性能上优于grunt的【转载请注明来源】【本文受版权保护】第一个原因。
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【原创不易，请尊重版权】异步并行的gulp【版权所有】唐霜 www.tangshuang.net
【本文首发于唐霜的博客】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net这个搞文件流的过程，和node一样，是异本文作者：唐霜，转载请注明出处。【未经授权禁止转载】步的，也就是说当你在gulp任务中用多个【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。pipe去处理不同的stream的时候，【作者：唐霜】转载请注明出处：www.tangshuang.net这几个stream的处理过程是异步的，他【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。们会同时发生，而且一旦开始，就转到child_process里面去搞，搞完了如果你不做处理，根本不知【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】道。这也就是为什么gulp.task的回未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。调函数要用一种方式去通知的原因，它有三种原创内容，盗版必究。未经授权，禁止复制转载。方式通知：返回一个stream，返回一个未经授权，禁止复制转载。未经授权，禁止复制转载。Promise，直接调用callback【未经授权禁止转载】【版权所有，侵权必究】。如果不做上面三选一的处理，那么gulp本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。.task的代码执行完几乎就是一瞬间的事【转载请注明来源】【未经授权禁止转载】情，你的cli一闪而过，根本不知道后面发著作权归作者所有，禁止商业用途转载。【作者：唐霜】生了什么事情。
举个栗子更性感：【转载请注明来源】
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】gulp.task('default',function() {
gulp.src('src/*.js').pipe(..要花1分钟处理的..).pipe(gulp.dest('dist'));
});
你以为上面这段代码会在terminal里【本文首发于唐霜的博客】【本文首发于唐霜的博客】面等一分钟以后才提示你任务完成了吗？不，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】绝对不会。它会告诉你default ta【未经授权禁止转载】【转载请注明来源】sk结束啦，于是你兴冲冲跑去dist目录未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net看，啥都没有。正确的做法是：
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。gulp.task('default',function() {
return gulp.src('src/*.js').pipe(..要花1分钟处理的..).pipe(gulp.dest('dist'));
});
返回的是一个stream类型，gulp会未经授权，禁止复制转载。【作者：唐霜】监听这个stream的情况，直到一个en本文作者：唐霜，转载请注明出处。【未经授权禁止转载】d的emit事件被抛出来，gulp才会提【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。示你任务结束。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】
再来一个栗子让你吃饱：【未经授权禁止转载】
gulp.task('default',function() {
gulp.src('src/*.es6').pipe(..要花1分钟转码..).pipe(gulp.dest('src'));
return gulp.src('src/*.js').pipe(..花5秒钟合并文件的..).pipe(gulp.dest('dist'));
});
gulp又提示你任务结束啦，你跑去dis【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。t目录看，尼玛什么也没有，感觉被世界欺骗著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。了一样。上面两个stream是异步并行【未经授权禁止转载】的，这也就是说，第一个stream和第二【本文首发于唐霜的博客】【原创内容，转载请注明出处】个stream会同时开始，所以第二个st著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ream并没有发现src目录下的.js文【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net件，所以草草结束了，1分钟之后src目录本文作者：唐霜，转载请注明出处。【未经授权禁止转载】下才产生了.js，可是这个时候，下面个s转载请注明出处：www.tangshuang.net【转载请注明来源】tream早都结束了，你只能再运行一遍这转载请注明出处：www.tangshuang.net【转载请注明来源】个任务才能实现目的。那到底要怎样才能实现【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】我们的目的，转码完后再去执行合并文件的操【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】作呢？这个在下文有答案。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。异步是gulp获得更高性能的重要原因，然本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】而“并行”让开发者吃尽苦头。我刚开始遇到【原创内容，转载请注明出处】【本文首发于唐霜的博客】这个情况的时候，简直就是彻夜难眠。还好，转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net后来被我解决了，并且产生了pipe-qu本文作者：唐霜，转载请注明出处。原创内容，盗版必究。eue这个组件。
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【转载请注明来源】【转载请注明来源】发挥异步并行优势【本文受版权保护】
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。【未经授权禁止转载】【本文受版权保护】异步好是好，但是你是不是感觉好像没啥用，原创内容，盗版必究。【本文首发于唐霜的博客】反而给你带来了一些不方便。确实，刚开始的本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】时候，由于“异步”我总是不能在cli里面未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。得到自己想要的信息，由于“并行”总是导致原创内容，盗版必究。本文作者：唐霜，转载请注明出处。文件无法正确处理。但是慢慢思考之后，就好著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net像被上帝摸了一下脑袋，领悟了一些道理。
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。异步并行【原创不易，请尊重版权】这个思想，简直就是神来之笔，让工作流效率转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。高很多很多。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】举一个栗子先：我们经常会先撰写自己的代码【原创不易，请尊重版权】【版权所有，侵权必究】，然后要编译和打包，一般的流程是“js编【转载请注明来源】本文版权归作者所有，未经授权不得转载。译，然后模块的浏览器端支持，合并，混淆；未经授权，禁止复制转载。【版权所有，侵权必究】样式的编译，合并，混淆”。如果按照同步串行本文版权归作者所有，未经授权不得转载。的方式，必须按照上面的步骤一个一个去做，著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】异步并行就不用，因为非常明显，样式的合并本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net混淆跟js的任何一个动作都没有半毛钱关系【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】，所以我们应该在这个任务里面把文件流分为【作者：唐霜】转载请注明出处：www.tangshuang.net两条线，一条处理js，一条处理css，但【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。是必须等到这两条线都完成，才算整个任务完本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】成。这个任务所花的时候，是比较长那条线所花的【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】时间，而不是两条线的总和。
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】但是无奈，js的后面的处理步骤必须依赖前【原创内容，转载请注明出处】未经授权，禁止复制转载。面的步骤。所以在一条线内，又必须串行。这【转载请注明来源】未经授权，禁止复制转载。就是坑了，暂且不说在不了解gulp相关的【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。背景下怎么实现上面说的“完成任务的标准”转载请注明出处：www.tangshuang.net原创内容，盗版必究。，单就这个“依赖”就很麻烦。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】原创内容，盗版必究。gulp官方给出的方案是，通过task之【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net间的依赖关系来实现，比如创建jsComp【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ile, jsConcat, jsMin【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】ify三个任务，然后在jsConcat的【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。依赖中加入jsCompile，在jsMi【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netnify的依赖中加入jsConcat，这转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】样当你运行jsMinify的时候，前面两原创内容，盗版必究。未经授权，禁止复制转载。个依赖都会被执行，而且还是按照依赖的关系未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】顺序执行。但是这种思想非常恶心，创建一个【转载请注明来源】【关注微信公众号：wwwtangshuangnet】任务本来就是希望这个任务完成我想要的事情著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】，何必拆分为多个任务呢？当然，有的时候有【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】些小任务在不同的其他任务中都可能用到，可【原创不易，请尊重版权】未经授权，禁止复制转载。以单独出来，但是如果有些任务根本没有必要转载请注明出处：www.tangshuang.net【转载请注明来源】呢？所以，同步串行的东西，在编程世界里，【本文首发于唐霜的博客】【作者：唐霜】也是必须要有的啊，不然node为什么也有【未经授权禁止转载】【版权所有，侵权必究】很多sync的方法呢？
【原创内容，转载请注明出处】【原创不易，请尊重版权】原创内容，盗版必究。【未经授权禁止转载】合并异步并行的stream的实现【版权所有】唐霜 www.tangshuang.net
【转载请注明来源】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】前面提到的，A和B两条stream的pi转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netpe line并行非常棒，应该发挥这个功未经授权，禁止复制转载。原创内容，盗版必究。效，但是问题是，怎么实现判断何时这个任务原创内容，盗版必究。【原创不易，请尊重版权】才算结束，在cli中给出finished【版权所有，侵权必究】【作者：唐霜】的提示呢？其实这是stream的机制，我原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】们可以通过将A和B的两个stream注入【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net到一个新的stream中，而这个stre【未经授权禁止转载】本文作者：唐霜，转载请注明出处。am里面可以去构造何时emit一个end原创内容，盗版必究。【本文首发于唐霜的博客】事件。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【作者：唐霜】基于这个思想，参考了别人的代码，我实现了【作者：唐霜】原创内容，盗版必究。一个pipe-concat著作权归作者所有，禁止商业用途转载。组件，使用它可以实现这个功能。著作权归作者所有，禁止商业用途转载。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【转载请注明来源】npm install --save-dev pipe-concat
var gulp = require('gulp');
var concat = require('pipe-concat');
gulp.task('build',function() {
var stream1 = gulp.src(...).pipe(...).pipe(gulp.dest(..));
var stream2 = ...
var stream = concat(stream1,stream2);
return stream;
});
concat返回的是一个stream，所【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】以它可以直接被return给gulp的回【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。调函数，这样gulp在监听到这个新的st【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ream抛出的end事件时，才会结束当前原创内容，盗版必究。【版权所有，侵权必究】的任务。
【未经授权禁止转载】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】通过上面这个方法，我们实现了并行多个异步【原创不易，请尊重版权】原创内容，盗版必究。任务，在同一个任务里面，做多件事，这样可本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。以节省执行时间，提升我们的开发效率。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。有个槽点，就是到底用concat和mer著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ge作为名称。我们知道这两个单词都有合并未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。的意思，但是我认为concat更符合这里本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的场景，merge是合并，意思是会有覆盖【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】重写的，有重复的就合并，但是concat著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】没有，它是连接，concat真的就是把后原创内容，盗版必究。【转载请注明来源】面的往前面的尾巴上加。而我们这个地方实际未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net上是把两条stream pipe lin【原创不易，请尊重版权】【本文受版权保护】e叠加在一起，不改变pipe line本转载请注明出处：www.tangshuang.net原创内容，盗版必究。身的任何内容，而且从空间逻辑上，他们也有著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net先后顺序。只不过没有完全合并为一条线而已【关注微信公众号：wwwtangshuangnet】【本文受版权保护】。
【转载请注明来源】未经授权，禁止复制转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net串行stream pipe line的实著作权归作者所有，禁止商业用途转载。【转载请注明来源】现
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】接下来，我们就要干一件大事，就是把并行的【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】stream硬生生改为串行，从而实现前一著作权归作者所有，禁止商业用途转载。【本文受版权保护】个步骤完成之后，再执行后面一个步骤。这个本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。时候，我们有了步骤的概念，有了等待被执行本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的概念，我就要顺势推出pipe queu【版权所有，侵权必究】原创内容，盗版必究。e的概念了。
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【本文受版权保护】pipe queue就是具有先后顺序的p【原创不易，请尊重版权】【本文受版权保护】ipe line的组合。因为还没有提到p【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ipe matrix，所以我还暂时不上图原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】。一条pipe line其实处理了一个s本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】tream，虽然这个line中有多个pi【本文首发于唐霜的博客】原创内容，盗版必究。pe，但是他们的对象是连贯的，这组pip本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nete不可以分开对待。但是pipe queu著作权归作者所有，禁止商业用途转载。【作者：唐霜】e就不同了，它是line的队列，前一个l未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ine处理完毕，后面一个line才会继续原创内容，盗版必究。【原创内容，转载请注明出处】。
【本文首发于唐霜的博客】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【本文受版权保护】基于这种思维，我创建了【未经授权禁止转载】pipe-queue【转载请注明来源】这个组件，使用如下：【转载请注明来源】
【未经授权禁止转载】【作者：唐霜】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】npm install --save-dev pipe-queue
var gulp = require('gulp');
var PipeQueue = require('pipe-queue');
gulp.task('build',function() {
var stream1 = gulp.src(...).pipe(...).pipe(gulp.dest(..));
var stream2 = ...
var $queue = new PipeQueue();
$queue.when(stream1,stream2).then(function(next, concat) {
var stream1 = ...
var stream2 = ...
concat(stream1,stream2).on('end',next);
}).then(...).end(function(){
console.log('finished!');
});
return $queue.promise();
});
你在这个例子里面看到的，感觉上不是很简单【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】，因此不说说是不行的。
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】首先，PipeQueue是一个类，真的是【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】一个class类型，你可以去看源码，只不【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net过我用babel把它转码了而已。实例化这【原创内容，转载请注明出处】【本文首发于唐霜的博客】个类后放到$queue里面，可以去调用它未经授权，禁止复制转载。【原创不易，请尊重版权】的when, then, end，具体的【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net用法就不再这里说了，去我GitHub上去【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。看，都有非常详细的说明。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net为什么一定要把后面那两个stream放在本文版权归作者所有，未经授权不得转载。【转载请注明来源】函数里去，而不像when一样，直接当参数【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。传进去？其实道理很简单，就是当参数传进去【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。时，实际上pipe line已经开始了，未经授权，禁止复制转载。【版权所有，侵权必究】stream已经在流动了，而且很快就会结【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。束，而把他们放到then的函数里面的时候【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】，只有去调用并运行这个函数时，里面的pi转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netpe line才会开始，这就是最终的秘诀【本文受版权保护】【版权所有】唐霜 www.tangshuang.net。
【转载请注明来源】【转载请注明来源】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。另一个秘诀就是，给了一个next作为下一【本文受版权保护】转载请注明出处：www.tangshuang.net个then的行动信号，也就是说，如果你不【版权所有，侵权必究】原创内容，盗版必究。在then的函数里调用next()，那么【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。下一个then绝对不会执行，这样下一个t【转载请注明来源】原创内容，盗版必究。hen里面的stream也不会开始流了。
【本文受版权保护】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net而末尾的那个promise是为了返回给g本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ulp的，因为gulp只能通过前面说过的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net三种方式获得回调通知，而且callbac【版权所有，侵权必究】【原创内容，转载请注明出处】k形式在异步中是没法用的，而queue又【版权所有】唐霜 www.tangshuang.net【本文受版权保护】不能返回一个stream类型，所以这里只未经授权，禁止复制转载。【原创不易，请尊重版权】能构造一个Promise来实现啦。
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。有了pipe-queue，就可以把具有依未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】赖的两个不同的pipe line按照我们【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】惯有的逻辑思维组织起来，比如上面的js的未经授权，禁止复制转载。【转载请注明来源】build过程，不用再写多个子任务，然后【作者：唐霜】【版权所有】唐霜 www.tangshuang.net到依赖里面去一层套一层了。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】而且，由于pipe-queue是依赖于p【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ipe-concat实现的when方法，【原创内容，转载请注明出处】【原创不易，请尊重版权】所以实际上如果仅仅是想并行完成pipe 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netline，而不计较使用使用end事件的话原创内容，盗版必究。【作者：唐霜】，pipe-queue的when也可以并【原创不易，请尊重版权】【版权所有，侵权必究】行完成几条line。
【本文首发于唐霜的博客】原创内容，盗版必究。转载请注明出处：www.tangshuang.net【本文受版权保护】并行同步的stream pipe lin【转载请注明来源】【转载请注明来源】e的实现
原创内容，盗版必究。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net搞定了串行的stream pipe li本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ne就剩下最后一个问题，就是我要让bui【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ld js和build css那两条线同未经授权，禁止复制转载。【作者：唐霜】时运行，以用时更长的那条线的结束作为整个【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】任务的结束。
【未经授权禁止转载】【转载请注明来源】本文版权归作者所有，未经授权不得转载。思路就相对简单很多，其中两条线各自通过p【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ipe-queue来实现，现在的问题就是【转载请注明来源】未经授权，禁止复制转载。，有没有一个机制可以知道哪条线跑的时间更未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】久？这当然是可以的。这种两条线并行跑的形【本文首发于唐霜的博客】【原创不易，请尊重版权】式，就是并行同步【本文首发于唐霜的博客】，也就是整体上是并行，但是每个并行的li【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netne内部是同步串行的。基于这种思想，我开【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】发了pipe-matrix。matrix【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的意思是“矩阵”，我要实现的，不仅仅是几原创内容，盗版必究。【作者：唐霜】条线的并行同步执行，我希望任何一种形式都著作权归作者所有，禁止商业用途转载。【本文受版权保护】可以通过pipe-matrix去实现，所著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net以，总得来说，pipe-matrix就是【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。处理pipe queue的并行问题的解决【本文受版权保护】【本文受版权保护】方案。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【作者：唐霜】
上图是一个示意图，给了很多case。pi【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netpe就是一个绿色块，一个一个的管道，这些【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】管道连接在一起就是pipe line，是转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】stream处理的最常见形式，也是gul【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。p里面的默认形式，即case1。而cas【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】e2则是演示了当需要在几条line并行运转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net行，且全部完成后抛出end的过程。cas【转载请注明来源】【关注微信公众号：wwwtangshuangnet】e3则是pipe queue的演示。ca原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】se4是pipe matrix的演示，p【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ipe-matrix不仅可以让几条que【本文首发于唐霜的博客】未经授权，禁止复制转载。ue并行，而且可以在并行完之后串行至下一原创内容，盗版必究。本文作者：唐霜，转载请注明出处。个matrix。
【原创内容，转载请注明出处】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。使用方法也很简单：本文作者：唐霜，转载请注明出处。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。npm install --save-dev pipe-matrix
var gulp = require('gulp');
var PipeQueue = require('pipe-queue');
var PipeMatrix = require('pipe-matrix');
gulp.task('default',function() {
var stream1 = ...
var stream2 = ...
var $queue1 = new PipeQueue();
$queue1.when(stream1,stream2)... // 注意，这里不能使用end，即使使用了也无效
...
var $queue2 = ...
...
var $matrix = new PipeMatrix();
$matrix.when($queue1,$queue2).then(function(next) {
// ...
}).end(function(){...});
return $matrix.promise();
});
可以看到，其实pipe-matrix的用【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。法和pipe-queue的用法非常像，只本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】不过pipe-matrix面对的是que著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ue，而非pipe line，这也就是说【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。，在pipe-matrix中跟strea【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。m本身其实没多大关系了，matrix中，【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】主要监测的，是pipe queue的完成著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】情况，这也就是为什么我在matrix中说【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，如果你没有用到pipe queue，就转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。没必要用这个组件的原因。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。同步完成多个步骤的小技巧转载请注明出处：www.tangshuang.net
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【原创内容，转载请注明出处】gulp中有非常多的隐藏技巧并没有被官方【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】文档暴露给我们，官方总是希望我们用他们希【未经授权禁止转载】原创内容，盗版必究。望的方式去写依赖，而实际上，我们可以用一【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net种小技巧去避免。这就需要我们理解一下pi【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】pe，当pipe line结束的时候，s未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nettream其实还在，它被放在内存中，等待著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net释放。而如果我们这个时候立即用另一个pi原创内容，盗版必究。【本文受版权保护】pe line去操作它，那么它会被拾起来【转载请注明来源】【本文受版权保护】，继续投入战斗。举个栗子时间：
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。var stream = gulp.src(srcDir + '/js/index.js') // webpack code
.pipe(webpack({
module: {
loaders: [
{
test: /\.js$/,
loaders:['babel?{"presets":["latest"]}']
},
],
},
}))
.pipe(rename(name + '.js'))
.pipe(gulp.dest(distDir + '/js/')) // minify code
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest(distDir + '/js/'))
return stream;
其实上面这段代码有两个pipe line【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net，因为在gulp.dest的时候，已经输原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。出了文件，但是另一个pipe马上去接上，原创内容，盗版必究。本文作者：唐霜，转载请注明出处。这就相当于两个分开的pipe line首【原创内容，转载请注明出处】【版权所有，侵权必究】尾相连，实际上就是一个pipe line本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。。所以上面的pipe line会输出两个【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。文件，一个是webpack打包后的原始文【转载请注明来源】【转载请注明来源】件，另一个是uglify压缩后并且加上.【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。min后缀的混淆文件。
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】所以最后的最后，当我们再看前文js和cs【版权所有】唐霜 www.tangshuang.net【作者：唐霜】s的任务时，其实只需要用到pipe-co未经授权，禁止复制转载。【原创不易，请尊重版权】ncat就可以了，因为js和css各自的原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。工作流靠这里的小技巧就解决了。再通过pi本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】pe-concat合并两个stream，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。就可以完成我们想要的效果了。
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。废了这么大篇幅，从pipe-queue绕【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】到pipe-matrix，现在又绕了回来【作者：唐霜】本文作者：唐霜，转载请注明出处。。这就是一个不可饶恕的坑啊，也许只有在自【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。我折腾中，才能成长吧。
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【未经授权禁止转载】有了上面这些组件，帮我们完成各类异步并串本文版权归作者所有，未经授权不得转载。【转载请注明来源】行的pipe line，基本上可以帮我们本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】搞定所有gulp的任务了。还等什么，赶紧【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。搞起来。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
多谢老哥 很有用