蒙圈的你必须要弄懂各种前端build工具

摘要：即使对于一些经验丰富的开发者来说，诸多的前端工具还是会让他们感到头痛，例如我。解决这个问题的最好办法，就是在概念上理解他们的工作方式，已经他们之间相互配合的方式。

不要被各种专业名词唬住

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……诸多的名词让你一时间感到手足无措，好像根本学不完。

其实关键就是，不要被它们唬住。要知道，所有这些工具，其最初的设计目的，都是要让你的工作变得更简单。

要想弄明白这些工具是什么、如何工作以及为何要使用它们，你其实只需要抓住少数几个核心概念。

概念1：build工具的两大核心功能，就是“安装vs做事” 

---

从本质上说，开发工具做的事情就两个：

帮你安装东西

帮你做事

当你接触到一个新的开发工具的时候，你首先需要搞清楚一个东西：“这个工具的目的是帮我安装东西，还是帮我做事？” 

安装类的工具，例如npm、Bower和Yeoman几乎什么东西都能装，它们可以用来安装前端库，例如Angular.js或是React.js。它们还可以为你的开发环境安装服务器。它们可以安装测试库。它们甚至可以帮你安装其他的前端开发工具。 

简而言之，任何你能想到的与代码有关的东西，它们都能安装。 

而帮你做事类的工具，例如Grunt、Webpack、Require.js、Brunchu和Gulp则更加复杂一点。这类工具的目标，是在web开发中帮你完成自动化。有的时候，这类工具所做的事情，被称为“任务（task）”。

为了完成这些任务，这类工具经常需要自己的包和插件生态。每一个工具都会使用不同的方式来完成任务。这些工具所做的事情也不尽相同。一些工具，擅长处理那些你所指定的任务，例如Grunt和Gulp等工具。还有一些工具，只只专注于一件事情，例如处理JavaScript的依赖，例如Browserify和Require.js等工具。 

有的时候，你在一个项目之中可能需要使用多种工具。例如，我就曾在一个项目中使用了不同的工具来将下列任务进行自动化处理： 

在一个文件中替换文本字符串

创建文件夹，并且将文件转移到这些文件夹中

用一条单一命令运行单元测试

在我保存文件的时候刷新浏览器

所有JavaScript文件整合为一个文件，将所有CSS文件整合为一个文件

对所有JavaScript和CSS进行简化处理

在html页面中修改