js自动化构建工具-----webpack、gulp与grunt的区别和对比

前端自动化

首先先聊一波为什么要用构建化工具，现在这个年代，前端的代码越来越冗余和庞大，代码维护、打包和上线的流程也非常繁琐。所以我们需要一个工具来精简我们的流程来提高效率，所以我们需要自动化的部署工具。

GRUNT

官网：http://www.gruntjs.net/

文档：http://www.gruntjs.net/getting-started

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，作用：压缩文件，合并文件，简单语法检查。主要基于Gruntfile这个文件，可以进行压缩、编译、单元测试、linting(js检查)等。Grunt生态系统非常庞大，有很多插件可以选择，并且可以自己写插件发布到npm上面。

 gulp

官网：http://www.gulpjs.com.cn/

gulp.js是一套基于node.js流的自动化构建工具

优点：可以快速构建项目并减少频繁的IO 操作。

webpack

官网：http://webpackdoc.com/

webpack是目前很热门的前端模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，如commonJs模块、amd模块、es6模块、css、图片、json、coffeescript、less等。