工欲善其事，必先利其器。想要在春招中过五关斩六将，前端基础知识掌握的不扎实可不行。今天小渡就给大家盘点一下几款最热门的构建工具。

说到构建工具，我们往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的。之前小渡也和大家探讨学习过自动化构建工具，今天咱们主要来聊一聊按照工具类型对其的分类。

其实，构建工具,说白了就是帮助我们通过配置或者编写约定好的代码,来自动完成上面的这些功能的一个工具。对于需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻我们的劳动，简化我们的工作。

说到这里是不是有点懵？

其实简单来说，js、css、less、img等等都需要进行处理或编译后才能发布的，比如说压缩，合并，处理css浏览器前缀等等，而代码又需要维护，如果你不用自动构建工具，而是手动去做，也就是说你每改一次代码，就要压缩，合并等把一系列处理都做一次，才能用。学会自动构建工具，再加上各种配套的插件，可以自动完成各种复杂的处理。

其实啊，构建工具虽然最主要的功能是实现自动化处理，让我们日常工作更方便快捷以外，有的工具还提供模块化、组件化的开发流程功能。因此具体来说，按照工具的类型，我们可以把他们分为模块化打包类、任务流构建类和集合型工具类（脚手架）三种。

1

模块化打包类

有过Node.js开发经历的同学应该对模块很熟悉，需要引用组件直接一个 require 就OK，这类工具就是这个模式，还可以实现按需加载、异步加载模块。

常用工具包括Browserify、Webpack、rollup.js等。Browserify可以让你在浏览器端运行使用require加载的js代码，我们可以在控制台利用基于node环境中得npm命令进行安装，并将js文件编译成可以被浏览器识别得js语法。

WebPack则可以看做是模块打包机。

它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

而Rollup是一个JavaScript模块打包工具，可以将小块代码编译成大块复杂的代码。开发者可以使用ES2015模块和TypeScript，最终打包成一个独立的可运行在浏览器或者Node.js环境的文件。

2

任务流构建类

这是基于任务的构建行为，是不在乎操作对象是否为模块化的，也是小渡今天要介绍的重头戏。

这类工具的目标是通过配置来解放日常需要重复的工作——转化、合并压缩和单元测试等等。

有同学会有这样的疑问：这些操作Webpack和Rollup不是也能做吗，为什么还要用任务流呢？是的，的确这些操作webpack和rollup可以完成，但因任务流工具和模块化构建的出发点不同，任务流工具是十分纯粹的自动化行为，虽然在开发过程中很少用到，但多了解学习还是很必要的。

任务流构建工具常用的包括Grunt、Gulp两大工具。

Grunt

作为老牌构建工具，它是通过配置驱动——通过获取到的JSON配置执行操作，来流水线式执行相应任务。虽然在学习成本和执行效率上不出众，但它依然被许多知名项目如WordPress、Twitter和Jquery等使用，也拥有持续更新的完整生态圈和中文文档。

但同时特点也是缺点，Grunt缺点也是配置驱动，当任务非常多的情况下，试图用配置完成所有事简直就是个灾难；再就是它的I/O操作也是个弊病，它的每一次任务都需要从磁盘中读取文件，处理完后再写入到磁盘，这样一来当资源文件较多，任务较复杂的时候性能就是个问题了。

Gulp

作为一款新型的构建工具，虽与Grunt的功能相同，但其与Grunt相比，Gulp无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且Gulp使用的是nodejs中stream来读取和操作数据，其速度更快。

如果你还没有使用过前端构建工具，或者想找一款简易入门的工具的话，那就尝试一下Gulp吧。相比较于Grunt，Gulp拥有以下三大优势。

• 代码驱动易于使用

代码驱动即通过执行实际代码驱动程序执行，与常见的配置驱动不同（Webpack、Rollup和Grunt等都是配置驱动）。

从任务流构建的角度上看，代码驱动相比配置驱动有三点好处：一是高度的灵活；二是没有过多的配置项，减少学习成本；三是更方便错误的断定和异常情况的调试。

• Node流构建快速

Gulp作为后来者，充分利用NodeJS流的思想进行IO操作，极大增加了大型项目的构建速度。一步到位，无需多次的IO操作。

• 易于学习简介明了

Gulp有十分精简的API。你能想到各种类型的任务，基本是通过仅有的五个可链式操作的方法实现的吗？不仅仅是学习和使用方便，编写后的功能也是一目了然。通过最少的API，掌握Gulp毫不费力，构建工作尽在掌握。

总的来说，Gulp是一款非常轻量级的工具，但是gulp使用者来说，并不是每个人都有非常强的处理错误能力，如果遇到插件bug（当然这种情况很少见），需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。

那么我们该如何选择这两款工具呢？在做选型的时候，我们往往会考虑以下几个因素：是否符合团队的技术栈；是否符合项目需求；生态圈是否完善、社区是否活跃。排除前两点主观的因素，我们在这两款主流工具中看一下他们的比较分析。

从工作流来看，这两款工具都是基于任务类型，所以它们的工作流是一致的。可以看到它们打包的策略通常是Allin one，最后页面还是引用css、img、js，开发流程与徒手开发相比并无差异。

从适用场景来看，通过上面的介绍可以看出它们侧重对整个过程的控制管理，实现简单、对架构无要求、不改变开发模式，所以非常适合前端、小型、需要快速启动的项目。因此，这两款工具也成了任务流构建工具中的热门选手。

3

集合型工具

集合型工具是使用了多种技术栈实现的脚手架工具，它可以用来快速的自动生成项目的必要文件和基础文件结构。脚手架工具的好处是即开即用，缺点就是它们约束了技术选型，并且学习成本相对较高。

主流工具包括Yeoman、FIS、jdf、Athena、cooking、weflow等等。

Yeoman

它是一个通用的脚手架搭建系统，可以创建任何的类型的app。同时它又是”语言无感知”的，支持创建任何类型开发语言的项目，Web,Java, Python, C#等等。

Yeoman的通用性在于，它本身不做任何决定，所有的操作都是通过Yeoman环境里面的各种generator实现的。通过自定义generator，我们可以创建任何格式的项目目录。这是Yeoman的最大魅力之处。

FIS

作为老牌前端构建化工具，FIS提供了一套贯穿开发流程的开发体系和集成开发环境，为产品线提供前端开发底层架构，这能帮助工程师提高开发效率，沟通协作效率，快速实现需求并达到代码的最优化。但是随着近几年源源不断的“新生代工具”逐渐占领前端市场，FIS似乎逐渐暂缓了突破的步伐以至于备受吐槽。

尽管不如前几年火热，但重要的是FIS的内在设计思想值得借鉴，在进行二次开发，或者准备自己开发一套属于自己团队编译工具，都有十分重要的借鉴意义。

所以说，工具就只是工具而已，是你学会前端技能的一种手段方法。当你是觉得某个工具不是一个好的构建工具的时候，你完全可以基于它的思想开发一个啊，总之适合自己的才是最好的。

以上就是本次小渡分享的前端构建化工具，各位同学get到了吗？

希望这些工具对大家有所帮助和启发，祝各位在春招都能成为offer收割机，新的一年前端技术棒棒的，薪资翻翻，一起在国内推动大前端的未来！

本文转载自【 Duing】