前端构建工具

前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，当然人为的错误也随着流程的增加而增加了更多的出错率。所以每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知，百度有FIS,腾讯有Modjs，360有燕尾服，grunt，webpack。

百度FIS团队的fis3：

其主要功能基本都是围绕着前端开发所需要的三种编译能力：资源定位、内容嵌入、依赖声明。

fis3实现了一套“静态资源管理系统”，在开发页面的时候只需要用相对路径开发

fis3也提供了很多插件来对图片进行合并、对HTML、js、css文件进行合并，fis3会对路径中带有 ?__sprite 的图片进行合并，减少了请求数量。但单纯的资源合并是没有办法按需加载资源的，然而静态资源按需加载也是减少资源冗余的很重要的方式。

http://www.open-open.com/lib/view/open1452002802667.html

grunt:

Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。

在前端项目中，我们为了可分工明确将js，css独自出一个个的文件， 但这样一来用来页面上，增加了文件个数，同时也产生过多的Http请求，可从性能的角度来考虑，不利于页面优化。所以外卖需要利用grunt合并这些js和css文件。

http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

webpack：

web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布。适用于react.js的打包工具。

https://segmentfault.com/a/1190000003970448

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活

8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快