前端自动化构建方案#
随着web应用的规模与日俱增，以及用户对前端界面的要求愈加严格，前端开发 “ 刀耕火种 ” 的旧石器时代已经逝去，伴随而来的，是围绕【开发效率】以及【运行性能】的工程化问题。
一、自动化构建
【自动化构建】作为前端工程化中重要部分，承担着若干需要解决的环节。包括【流程管理】【版本管理】【资源管理】【组件化】【脚手架工具】等。
1、流程管理
完整的开发流程包括本地开发，mock调试，前后端联调，提测，上线等。在每个团队的基础设施当中（如cms系统，静态资源推送系统等），都会存在一定程度将前端开发流程割裂。如何运用自动化的手段，对开发流程进行改善将可以大幅降低时间成本。
2、版本管理
web应用规模愈加复杂，迭代速度也愈加频繁。而前端界面作为一种远程部署，运行时增量下载的特殊GUI软件，如何使用自动化构建工具，对不同版本的资源文件进行管理，并让用户第一时间感知版本的回撤以及升级（尤其是在浏览器缓存以及cdn广泛使用的今天），将对企业有更好的安全保障，对用户有更佳的使用体验。
3、资源管理
随着每个团队业务复杂程度的加深，对于功能模块封装的粒度必将愈加精细。衍生出来的，将会是资源数量以及依赖关系等的管理问题。以人工的方式考虑单个页面或单个功能的资源优化是片面的，并且效率低下。通过工程化的手段，在前端构建过程中自动化地以最优方式处理资源的合并以及依赖，是提升性能以及解放人力资源的重要途径。
4、组件化
组件化方案，是以页面的小部件为单位进行开发，在系统内可复用。如何以最优化方式实现组件化（js、css、html片段，以就近原则进行文件组织，以数据绑定方式进行代码开发，业务逻辑上相对外部独立，暴露约定的接口）；并且随着组件化的程度加深，如何对组件库进行管理，合并打包以及多人共同维护等，都是无法避免的问题。
5、脚手架工具
我们希望每次研发新产品不是从零开始，不同团队不同项目之间能有【可复用的模块】沉淀下来。对于前端而言，【可复用的模块】除了【组件】，另外就是【脚手架工具】。运用脚手架工具，一键安装，自动化搭建不同类型项目的完整目录结构，工程师将有更多时间专注在业务逻辑代码的编写上。
二、技术元素
现如今前端技术元素包罗万象，在进行技术选型时，让开发者有了更多的空间。而每个元素应该在自动化构建中承担不同的角色，但职责上不耦合，当前端领域在某一环节有更优方案出现时，能以最低成本进行替代。
【webpack】作为当前最优秀的打包工具，以模块为设计出发点，所有资源都可以作为模块自动化进行合并打包以及依赖处理。目前而言，是解决【资源管理】以及【版本管理】的最佳方案。
【gulp】是一款优秀的构建工具，通过流式是文件管理，以及定制化的任务管理，可完美兼容任何形式的【流程管理】。
【vue】与【avalon】作为数据驱动的 js 框架，都拥有其优秀的【组件化】方案。vue拥有其强大的技术生态，可驾驭不同复杂度的项目，在移动端上性能也尤为卓越；而avalon在兼容性方面作了最大化地努力，可兼容ie6的亮点，则让其在传统项目中拥有先天的优势。
【yo】提供了一个强大的generator构建系统，让开发者可以搭建定制化的【脚手架工具】，快速启动任何类型的项目。
总的而言，【gulp】是粘合剂，进行【流程管理】；【yeoman】制作【脚手架工具】；【webpack】是打包工具，负责【版本管理】和【资源管理】；【vue】及【avalon】则落实逻辑细节，实现【组件化】。
三、支线
前端的【自动化构建程度】，与每个团队的【基础设施】以及【项目类型】存在强关联性。“ 一刀切 ” 是鲁莽的，也将受到更多的阻力。更优的选择，是结合现有的基础设施，以及提取过往项目的共同点，为新项目提供更好的技术以及流程支持。
自动化的构建方案，分为【三条支线】。
支线1：【基础设施】强依赖项目
内部高频项目一般依赖组内较多的基础设施，如cms，rms，crs，活动后台等。因为功能依赖分散并且手动管理，所以在活动开发流程中存在相当程度可避免的【效率损耗】。
初始方案：【基础设施自动化】+【数据驱动】+【组件化】
支线2：移动端项目
初始方案：【流程管理】+【版本管理】+【vue+vuex应用状态驱动】+【s-ui】
支线3：内部管理后台
初始方案：【流程管理】+【vue数据驱动】+【element-ui】（流程图大致同上）
四、聊聊优秀的第三方方案
1、关于fis
fis的热度应该是在13-14年开源构建工具尚没普及的年代，那时候应该fis1在业界是比较优秀的，也较好地解决了前端当时比较野蛮的开发方式。fis是个大而全的工具，为开发者制定了一套完整的开发者流程。对于小型团队，基础设施较弱，是完美的方案。从开发到部署，遵循他们的规范，一条龙服务。但是对于一些大企业，基础设施已经成型，fis也许并不是最适合的方案。无论是项目规范，亦或部署规范，都一定程度存在不兼容元素；未来需要扩展，技术上更替成本太大，绕不开fis的约束。
2、关于gulp
2015年就是fis3了。同时，2015年是构建工具爆发的元年，fis1逐渐不满足业界需求，fis3是百度想挽留开发者的一步策略，但是热度也赶不上fis1了。2015年，grunt盛行。但2016年初gulp崛起，grunt被淘汰了。gulp一直盛行到今天，保持了比较稳定的发展，github也2.3w星了（插件9000+），fis3是1.7k（插件440+），fis1是2.7k。
3、自动化构建选型
成型的企业，在前端技术选型上一般会是2个方案。（1）自造轮子，面向内部业务场景，密切配合技术选型以及基础设施，强耦合。（2）选用小而美的优秀开源方案，技术栈进行定制选型，如gulp+webpack，预留可替代空间的搭配，应对不同复杂度的业务场景，并当有更优秀方案出现时，已最低的成本进行取代。
4、进击的2017
14 - 16年是前端爆发的几年，但17 - 18年 ，在业务系统框架以及构建工具2个方向上，是会相对稳定的一年。vue，react ，angular，gulp，webpack等，至少2年内应该都会是非常优秀的方案选型。其他的方向，node更多服务端职责，h5高级动画（webGL，svg ，webVR），跨端开发（谷歌的渐进式web应用以及阿里的weex），都是蓄力的阶段。
