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等。