浅谈我在前端自动化工作流中的实践

现如今的前端真的是百家争鸣，百花齐放。各路新奇的技术，框架层出不穷，Javascript这门编程语言也被推向了神坛。Javascript在前端，后端，客户端各个领域都想要蚕食一块资源，为前端开发者们带来了新的春天，让很多切图仔们摇身一变，变成了神坛之上的所谓的前端大佬。前端自动化工作流正是这众多前端发展道路上耀眼的一个领域。

切图仔的饥荒年代

在前端自动化一词还未出现在我的眼中之前，我的工作中有这样几个痛点

html代码无法复用，无法很便捷的使用后台语言的include模版
由于浏览器厂商之间的明争暗斗，导致了css3属性兼容代码的多样性
各种雪碧图的生成，css代码的自行定位生成
写完一段代码，就要手动保存，手动刷新浏览器去查看，还可能受到本地缓存的困扰
各种代码，资源文件的压缩，加版本号
代码的语法检测
开发环境和生产环境的代码分离

在实际的开发过程中，这些痛点很多时候都因为项目时间不够，一般都是没做，或者通过很多敷衍了事的办法，匆忙上线，这就直接导致了代码的混乱，可维护性差。

希望的曙光

随着nodejs的出现，前端攻城狮们将手伸向了不曾也不敢触碰的服务端领域，在服务端上大放异彩，可以用Javascript来操作本地文件了，可以开启子进程对文件进行处理了，可以处理http请求了。这时，我遇见了Grunt

Grunt算是前端自动化工作流早期的一个项目了，也算做是一个元老了，距离它的第一个版本发布差不多已经走过了五个春秋，不过至今市面上还有很多开源项目中使用了Grunt。我对Grunt了解的不太深入，大概只经历了10个以内的项目，因为Grunt有个痛点，就是配置文件略微繁琐

Grunt是配置和运行分离，每一个task做的事情非常多，而且配置项也很多，就像如今的webpack(间接黑了一把webpack)

长江后浪推前浪

既然Grunt饱受诟病，那么就再造个轮子吧。于是，Gulp出现了。

Gulp在经历了4年光辉岁月之后，走到了今天的4.0版本，我也跟着从0.x用到了今天的4.0。Gulp仅拥有6个API，核心的概念就是管道，相信有过Unix经验的同学一定对管道哲学的概念印象很深，以”链式模型”来组成一条直线工作流。

Gulp也拥有丰富的插件，这些插件就解决了我之前的几大痛点

gulp-file-include 复用html模版
gulp-minify-css 压缩css
gulp-sass sass编译
gulp.spritesmith 雪碧图自动生成图片，并同步生成sass代码
gulp-uglify js代码压缩
gulp-autoprefixer css3 属性自动添加前缀

在编写好gulpfile.js的配置文件之后，在命令行中打开项目根目录路径，运行gulp的启动命令之后，一系列的工作流就会自动运行，在你对文件进行每一次更改之后，gulp都会执行对应的任务，妈妈再也不用担心我的工作烦恼了！

虽然这种工作流用起来很爽，但是每次新建项目的时候又是一个痛点，每一次还要把上一个项目复制过去，再执行一次例如npm install安装依赖的动作，这样次数多了，我又开始觉得麻烦了(os：我这人就破事多)，于是不甘寂寞的我写了个项目生成器

耐损度36的王族之剑

Yeoman是一个强大的前端构建工具，是前面提到的Grunt的好基友，它的作用是什么呢，可以让你的脚手架变成一个模版，通过Yeoman来创建项目，这样，我们就可以使用一个命令来达到初始化创建项目的目的。Yeoman官方提供了一系列的api，你可以自己开发一个generator，我利用它写了个自己的generator，先贴个地址generator-hllui

有此神器之后，切图的效率真的是大幅度的提升，可以让我更加专注地在切图上，免去了很多其他工作的重复消耗

但是，这个工具在我们团队使用了一段时间之后，我发现了一个问题，就是有些同学记不住命令，或者经常有命令输错的情况，还有很多次命令行工具挂掉的问题。我就想着如何去改进，在某个深夜撸码的时候，下了个决心，决定自己造一个可视化脚手架轮子

拔出了打boss的大师剑

我用ELectron+React写了个桌面端应用，这是一个本地脚手架工作平台，是为了应对多元化的业务需求，也是为了能让团队其他前端同学在属于他们自己的领域大放异彩。

我给它起了个名字，叫Dotflow，手机上一直装着的一个游戏，叫dots，通过连接相同颜色的点，来组成一个回环，消失得分。当所有的点都连在一起的时候，就会行成一条线，虽然过程有所曲折，但是终将会走到终点

工作流只是这个应用的其中一部分，工作流内置了我编写的日常使用的脚手架，当这些脚手架满足不了你内心膨胀的欲望的时候，你可以选择添加一个git repo脚手架，也可以添加一个本地脚手架。当然这些脚手架模版还是有一点规范要求的。这里的脚手架已经不局限于基于Gulp的工作流了，你可以添加基于webpack的，基于rollup的，甚至更多适合你自己的脚手架，只要对你的脚手架稍加改造，就可以在这个平台上运行起来