前言：
随着前端vue、react、Angular等框架越来越火，自动化构建工具也时不时映入我们的眼帘，转眼已是几分天下的局面，功能很强大，使得前端项目开发和维护越来越方便，但是想灵活运用，学习曲线却越发陡峭，文档更是爆炸式的膨胀，我们面对的是各种基于不同编译工具的专项功能插件，及对应的配置参数。
搞好了：解放双手，极大的提升"开发体验"，一键搞定一切，空对空导弹一键发射，发射后不管！自动追击目标。脱靶自动启动自曝程序，不会伤及地面。
搞不好：鸡肋，加重负担，浪费人力（专人维护，其他人一点不会,或者多版本迭代后变得难以上手），反而浪费时间（调试流程别扭，半自动半手动ctrl+c还得关闭这个软件打开那个软件），黑盒（最禁忌！直接傻眼），过度依赖编译工具，束缚技术选型，单一技术栈。
编译工具带给我们什么？
（1）搭建开发环境：
热更新
mock数据
代理
（2）生成上线文件：
编译（less，sass，es6，typescript，.vue，.jsx ）
语法校验
压缩校验 css ，js
css3代码自动补全
px转rem
自动化测试
自动精灵图片
模块化
代码分离
智能 WebP
（3）文件操作，一键发版到服务器等。
编译工具对比
偏流程：
Grunt(需要"配置"很多任务)
Gulp（需要"编写"很多任务）
偏模块化：
Browserify（只能对js文件有效,较轻量级）
Webpack（需要配置，最初定位SPA，模块化）
rollup.js（后起，定位和Webpack相同，配置简单，各有所长）
国际空间站：(高度集成，一站式服务，什么功能都有)
Yeoman、FIS、jdf、Athena、cooking、weflow
（1）Yeoman：google
yo（脚手架工具）、grunt（构建工具）、bower（包管理器）
yo （脚手架工具）安装generator 可以安装许多generator项目中使用某个（很好）
Bower（包管理器，不再维护） or npm 管理各种包 升级 卸载 或者制定使用某个版本
Grunt or Gulp （构建工具）
（2）百度的FIS（很多封装成熟的功能，简单配置即可使用，自由度受限）
https://github.com/fex-team/fis3-demo 3年前停止维护，不支持最新的node版本！
（3）jdf、Athena
讨论：如何选择？
熟悉下grunt、gulp、webpack的配置项
grunt：
更多实例分析。。。
gulp：
更多实例分析。。。
webpack：
"依赖链"来组织最终的文件。
打包后的样子：
更多实例分析。。。
讨论
- 学习方法。
- 我们能做些什么？毕竟已经有很多脚手架或者比较成熟的例子。