javascript自动化构建工具grunt、gulp、webpack介绍

使用缘由

前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率

简介：grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查

为什么要使用Grunt？

Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，还可以自己动手创造一个Grunt插件，然后将其发布到npm上。

简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

为什么要使用gulp.js？

1） 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理

2） 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作

3） Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作

4） 通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道

入门文档:http://www.gulpjs.com.cn/docs/

Webpack (中文指南http://webpackdoc.com/)

简介：Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等

为什么要使用Webpack？

1）模块化，让我们可以把复杂的程序细化为小的文件

2）Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能

入门文档:https://doc.webpack-china.org/concepts/

三者工作方式简介：

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件

留心：上面工具都依赖nodejs的命令，所以首先需要安装nodeJS环境