最近在做一个嵌入式小作业，需要用到网站。前端部分我已经完成，还使用nodejs-websocket搭建了一个服务器来实现前后台接口测试。这个项目前端部分很简单(毕竟小作业)，后台和底层（C语言）还在coding中（不是我做），这里只能给出作业的大致流程：
用户访问网站控制底层,数据的实现依靠websocket，后台根据规定接口的数据作出响应的反应。同时还必须保证每隔一段时间（还需要测试来取得合理的数值，我模拟后台的时候是2s，肯定是太长了的）返回LED灯的状态在前台实时展示出来，这也是为什么使用websocket的原因。一开始想使用socket.io,这样可以对事件分类触发，最终屈服于老师的尽可能简单，使用了原生的websocket。
项目源码地址
项目前端目录：
path.png
node写后台简洁快速
project.png
因为项目简单，一开始我是根本不想使用前端自动化构建方案。但是转念一想，再简单也是个项目，还是规范开发流程。另外一个原因是最近的项目中都是使用webpack来打包构建，很久没使用gulp，就尝试用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。
网友评论