一个gulp流程控制问题

最近在做一个嵌入式小作业，实现的功能是：用户访问网站前端控制嵌入式设备，后台根据规定接口的数据控制相应的部件工作。同时还必须保证每隔一段时间（还需要测试来取得合理的数值，我模拟后台的时候是2s，肯定是太长了的）返回LED灯的状态在前台实时展示出来。这也是为什么使用websocket的原因。

project.png

path.png

因为项目简单，我使用gulp来控制前端项目的自动化构建流程。

1.出现状况

在创建一个生产环境任务的时候，我天真的使用下面的一段代码

gulp.task('build',['cleanDist','css','js-optimize','img','htmlReplace','revProduct']);

结果打包出来的项目当然不符合预期，入口文件引用的资源缺少版本之类的。我意识到是控制流程有问题。

gulp默认情况下，任务会以最大的并发数同时运行 -- 也就是说，它会不做任何等待地将所有的任务同时开起来。这里就涉及到串行方式运行任务的问题。

2.gulp串行方式运行任务

2.1 gulp.task 添加 return或使回调函数

这个在控制流程的时候很重要，return gulp.src...是通过返回一个stream来表示任务已经被完成。这样就可以知道当前依赖任务是否完成，执行下一任务。
举个例子：

//1.不使用return ，虽然任务也可以执行，但是当它作为依赖时，gulp工作流将失去控制，因为gulp根本不知道任务的执行情况
gulp.task('img', function() {
    gulp.src(['src/images/*.{png,jpg,jpeg,ico,gif,svg}'])
           。。。。。；
});

//return stream 规范
gulp.task('img', function() {
    return gulp.src(['src/images/*.{png,jpg,jpeg,ico,gif,svg}'])
         。。。。。。；

});

//使用回调函数 规范
gulp.task('img', function(cb) {
    gulp.src(['src/images/*.{png,jpg,jpeg,ico,gif,svg}'])
       。。。。。。；
    cb(err); // 如果 err 不是 null 和 undefined，流程会被结束掉
});

2.2利用 gulp.task 依赖

gulp.task(name[, deps], fn)

deps是一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。这里就和2.1中讲到的有关系了。（请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream，不然我怎么知道依赖的任务执行完了）

还有就是deps中的任务没有先后依赖关系，如果你串行方式运行任务，亦即，任务依赖，就必须给每一项添加详细的依赖。

dep.png

这样的方式一个个加控制，就太麻烦了，而且容易遗漏，我刚刚的问题就在这里。

串行方式运行任务

2.3引入插件 gulp-sequence

最后面解决问题：

res.png

控制流程，结果ok。