前端构建

　　最近我的前端开发已经离不开 SASS，LESS 等工具了，在多人协作项目中还会引入 Lint 和 Test。 前端文件在上线前就需要运行这些任务。首先聊聊前端构建工具，目前前端构建工具已经非常丰富，大致分一下类：
　　
　　1、任务管理工具（task runner）
　　
　　通过声明和组合构建任务来进行整个网站的构建， 有自己的一套任务声明语法和任务实现接口。例如 Grunt 和 Gulp，这两个都是插件式的架构。有大量的插件可用，缺点就在于做什么都只能用插件，没有就自己写一个。
　　
　　任务管理工具中我们可以声明若干个任务，比如压缩、测试、替换等。 这些任务间可互相依赖（往往用来定义顺序），可以是同步的也可以是异步的。 然后我们可以自由地选择运行哪个任务，任务管理工具会帮我们运行它（以及它的依赖）。
　　
　　工作第一年我使用的是 Grunt 构建和部署整个网站。 tmy Grunt 的问题在于所有事情都依赖于插件，而插件之间不一定能够很好地协作。 在此期间我们写了几百行的构建脚本，同时引入了大量的插件。 维护 Gruntfile 是我们最头疼的事之一。
　　
　　此后我迁移到了Gulp，脚本缩减为几十行，Gulp 是一个优秀的构建工具。 Gulp 也是插件式架构的任务管理工具，与 Grunt 最大的区别在于采取流式接口， 减少代码量的同时插件之间的衔接也很顺畅。
　　
　　然而像 Grunt 一样，Gulp 也有着 JavaScript 任务管理工具的缺点。 每个 JS 工具库都需要包装为 Gulp 插件来使用，我无法选择我喜欢的版本或者我喜欢的小众工具。 与此同时，Gulp 比 Grunt 还要难以调试：基于 Stream 的构建流程中很难插入一条 console.log 。
　　
　　2、打包工具（package tool）
　　
　　通过为每一类文件配置需要的处理方式，来实现整个站点的构建。如 Webpack 和 FIS ，这两个都是整个站点的整体构建解决方案。
　　
　　Webpack 给出了一体化的构建方案。我们无需关心构建过程的实现细节， 只需要为每种文件设置它应该经过哪些预处理、哪些转换，并且给定打包地址。 Webpack 甚至会自动替换 HTML 中的相应资源。
　　
　　打包工具的学习曲线也较为陡峭，这类工具功能都相当强大。 缺点也很明显：很难精确地定义构建过程，所以和 AMD 混用时会产生非常多的坑。 如果你和 Harttle 一样有着洁癖一定不能忍这种粗暴的工具， Harttle 仍然相信自己能够把依赖定义清楚。
　　
　　3、构建工具（build tool）
　　
　　关于构建工具 Harttle 只想提 make 。Make 不仅仅是目标 + 依赖 + 命令！
　　
　　Make 是以来解决工具，可以解决任何树状依赖并根据文件修改时间来智能地更新。 因 Make 直接使用 Bash，Unix 强大的工具库只需 STDIN 和 STDOUT 便能解决绝大多数文件处理问题。
　　
　　构建工具的优势在于可直接调用 JS 工具的 CLI 接口，可以自由地选择任何 JS 工具而不需包装。 缺点便是没有针对 Web 前端提供更多的构建功能。
　　
　　具体前端有哪些构建需求呢，接下来将说说具体步骤。
　　
　　1、预处理
　　
　　JS/CSS/HTML 在设计之初并未料及它们会这样流行，整个 Web 已经形成一个大的分布式文档。 低层语言的更换或升级都因兼容性问题而面临着巨大困难。 这催生了各种中间语言个预处理器，例如 SASS，LESS，CoffeeScript，Babel 等。
　　
　　这些预处理工具可以将我们的中间代码转换为可运行的 JavaScript。 这些预处理器使得我们可以预先使用 ECMA Script6，以结构化的方式编写 CSS，或者在 CommonJS 环境中编写 JavaScript 等等。
　　
　　2、风格与测试
　　
　　在一个典型的工作流中，每次 Push 主分支或 npm 发布都应首先运行代码风格检查和单元测试。 我们需要这些操作能够在合适的时候自动执行。
　　
　　3、资源压缩
　　
　　在开发网站代码时，我们希望模块化地进行编码。每个业务逻辑，通用工具，或者架构元素都需要组织在单独的文件中。 但是如果用户浏览网页时也载入这么多源文件，那么页面打开速度会大打折扣。
　　
　　因此在网站发布时需要将源码合并压缩， JavaScript 可能还会需要模块化（AMD，CommonJS 等）， CSS 文件可能也需要合并、添加兼容性前缀（ -webkit- , -moz- ）等。 这些重复性工作我们也希望写成脚本。
　　
　　4、静态资源替换
　　
　　最为复杂的构建需求是静态资源的 URL 替换。 因为生产环境中的资源地址可能和开发环境中很不一样， 可能是由于 JS 合并、CSS 合并，也可能是由于应用了 CDN 加速。我们需要在部署时更改所有 HTML 文件中的静态资源地址。