我们在前几期的文章中给大家简单介绍了web前端工程化技术应用的一些基础知识等内容，而本文我们就继续来了解一下，web前端工程化都有哪些常用工具。
1、GruntGulp
这两款工具都是基于任务类型，所以它们的工作流是一致的：
可以看到它们打包的策略通常是Allinone，后页面还是引用css、img、js，开发流程与徒手开发相比并无差异。
特点与不足：
Grunt：
Grunt是老牌的构建工具，特点是配置驱动，你需要做的就是了解各种插件的功能，然后把配置整合到Gruntfile.js中。Grunt缺点也是配置驱动，当任务非常多的情况下，试图用配置完成所有事简直就是个灾难;再就是它的I/O操作也是个弊病，它的每一次任务都需要从磁盘中读取文件，处理完后再写入到磁盘。
例如：我想对多个less进行预编译、压缩操作，那么Grunt的操作就是：读取less文件-编译成css-存储到磁盘-读取css-压缩处理-存储到磁盘
这样一来当资源文件较多，任务较复杂的时候性能就是个问题了。
Gulp：
Gulp特点是代码驱动，写任务就和写普通的Node.js代码一样再一个对文件读取是流式操作(Stream)，也就是说一次I/O可以处理多个任务，还是less的例子。
Gulp的流程就是：读取less文件-编译成css-压缩处理-存储到磁盘
Gulp作为任务类型的工具没有明显的缺点，的问题可能就是完成相同的任务它需要写的代码更多一些，所以除非是项目有历史包袱(原有项目就是基于Grunt构建)在Grunt与Gulp对比看来还是比较推荐Gulp!
适用场景：通过上面的介绍可以看出它们侧重对整个过程的控制管理，实现简单、对架构无要求、不改变开发模式，所以非常适合前端、小型、需要快速启动的项目。
2、Webpack
Webpack是目前热门的前端资源模块化管理和打包工具。
特点与不足：
Webpack的特点：
1.把一切都视为模块：不管是CSS、JS、Image还是HTML都可以互相引用，通过定义entry.js，对所有依赖的文件进行跟踪，将各个模块通过loader和plugins处理，然后打包在一起。
2.按需加载：打包过程中Webpack通过CodeSplitting功能将文件分为多个chunks，还可以将重复的部分单独提取出来作为
Webpack也是通过配置来实现管理，与Grunt不同的时，它包含的许多自动化的黑盒操作所以配置起来会简单很多。
Webpack的不足：
1.上手比较难：官方文档混乱、配置复杂、难以调试(Webpack2已经好了很多)对于新手而言需要经历踩坑的过程;
2.对于Server端渲染的多页应用有点力不从心：Webpack的初设计就是针对SPA，所以在处理Server端渲染的多页应用时，不管你如何chunk，总不能真正达到按需加载的地步，往往要去考虑如何提取公共文件才能达到优状态。
3、总结
其实每个工具的
比如，你的工程模块依赖很简单，不需要把js或各种资源打包，只需要简单的合并、压缩，在页面中引用就好了。那就不需要Browserify、Webpack。Gulp就够用了。
反过来，如果你的工程庞大，页面中使用了很多库(SPA很容易出现这种情况)，那就可以选择某种模块化方案。至于是用Browserify还是Webpack就需要根据其他因素来判断了。比如团队已经在使用了某种方案，大家都比较熟悉了。再比如，你喜欢Unix小工具协作的方式，那就Browserify。充分了解各种工具、方案，选择合适的和自己需要的。没有绝对的好。优点换了场景也会变成缺点。