// 今年剩下的时间，就用来专门研究这个课题，完成这篇文章了。
前端工作流，顾名思义就是指前端开发的工作流程了。
我目前大致就是以下流程：
1、模块划分：
分析整个项目的UI界面设计图和交互流程设计，提炼UI界面特征和交互流程特征的共性，来划分为可复用和不可复用的模块，提炼出可以复用的公共模块，做成可以复用和配置的公共模块组件。
提炼不同层级的公用模块，很多人都能想到，但是体现模块划分水平高低的点在于“模块划分的粒度”，太细则会过于繁琐，太粗则灵活性差，不方便拆分。
2、代码划分：
有人可能觉得这步多余，认为划分了模块，直接每个模块独立分下去编码就是了。但这样必然会造成很多冗余代码。
最直接的冗余例子就是：css全局样式各个模块自己来一套，最后不但会冗余还会相互干扰。
所以，这步必然要划分出的全局共用的JS、CSS代码，典型的就是一些常用的JS库和CSS库。
此外，一些项目模块共用的交互或业务逻辑也可以提炼出来作为共用代码，为了保证低耦合性而设计的一些框架性的代码和模块，也可以划分出来作为共用代码。
这里需要注意的还是提炼共用代码时的粒度，不要为提炼而提炼，为复用而复用，复用的目的是为了减少工作量，提高可扩展性，减少bug。需要自己去衡量保证合用就好。
3、代码编写：
这步属于纯体力活，且能自动化的部分好像不多，但也不是没有。
典型的：处理css前缀的autoprefixer、把ES6转为ES5的babel、把less转为css等。
另外，还有各种牛逼IED的语法提示和自动补全，用CSS选择器语法快速编写HTML的EMMET等，熟练使用这些以后，代码编写这步还是很省力的了。
4、资源的处理和引用：
这里主要是想解决图片、字体、声音、视频、动画等资源怎样才能最方便、快捷、高效、低成本的处理成自己想要的样子，并十分方便的引用（对于我这种懒人来说，最好一键全自动[笑哭]）。
图片处理无非是精灵图合并、或者大图分割或等分、或者图片自动抠背景。
字体无非是希望能有查找方便的字库，像iconfont一样，点了就可以直接下载到本地指定的项目文件夹里，并且把里面的css自动添加到需要引用的css文件的对应位置里去，然后打开demo页，我直接复制过来用就是了。
声音、视频、动画，一般用得不多，用也无非就是配置好引用地址和参数即可，这个参数如果有规律的话，可以考虑自动化，没规律的haul，还是要自己配置。
还有公用的JS、CSS库等，我不希望要用的时候，到处去搜索引擎搜，去官网找。
我希望有个这样的页面：
我用过的CSS库、JS库都在上面，像google历史记录一样，能记录我什么时候使用了哪些库。但我不希望像历史记录一样只按时间排序，应该还要能按使用频率排序。这样我就能很快找到我常用的。
当然我也希望能搜索，以免使用某个不常用的库时找很久。
当我找到我要用的库并点击时，页面能给我这个库的官网和文档链接，我点击“确定使用”时，能记录一次使用次数。
5、测试：
这步又分为单元测试和集成测试。
单元测试我就理解为“模块测试”了，集成测试我就理解为模块组装为项目UI界面以后的总体测试了。
由于经历的公司大多没有专门的测试部门，通常都是前端组相互交叉人工测试各自的代码，对于测试了解不多，并不清楚这部分使用工作流能自动化到什么程度。
我猜，要是有专门的测试部门，最多也就是按项目模块的测试设计来专门编写单元测试代码，然后使用类似gulp或grunt等任务管理工具，建立一个任务，自动运行所有模块的测试代码，并生成测试报告日志文件，然后自动下发给各模块对应的前端开发同事？
6、打包、压缩、部署：
打包、压缩，目前都是用的webpack4，开发模式的热更新，改动一下就自己刷新浏览器实时看效果，还不错。
部署还是用的土办法，ftp连上服务器后替换文件了事，小作坊这样没啥问题，大公司肯定会骂出翔。
这是在知乎上看到大公司大神的玩法：大公司里怎样开发和部署前端代码？