看完这篇让你对各种前端build工具不再懵逼！

本文原标题为：我终于弄懂了各种前端build工具

译者：@Christian

译文：https://www.sdk.cn/news/5412

原文：https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.khi6r16h2

现在对于原文做的一些笔记，要看更详情的，可点击这里

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）”。

在你理解了前端工具分为安装类工具和帮你做事的工具之后，你就可以轻松的对它们进行归类：

概念2：build工具的“祖宗”是Node和npm

Node和npm负责安装和运行所有这些工具，因此你的所有项目中都会有它们的身影。Node是做事工具，而npm则是安装工具。

npm可以安装Angular.js和React.js等库。它还可以安装服务器，让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具，帮你完成很多事情，例如简化代码。

而Node，则是帮你完成事情的，例如运行JavaScript文件，以及服务器等。

概念3：build其实就是production-ready版本的应用

给项目创建“build”，它要将所有CSS文件合并成一个文件，然后再合并JavaScript文件。这样一来，你就可以将文件完成最小化。要想创建这个build，你需要使用build工具。它的作用不过是节省用户几毫秒的时间。如果你只是在学习开发的阶段，或者你的站点流量较低，你没有必要花时间和精力去生成build。

概念4：“安装”和“做事”之间的界限有时会模糊

没有工具只能做一件事情，而无法做另一件事情。所有工具都是“安装”和“做事”的结合体。但是一般来说，一个工具会有自己的强项，或是强于安装，或是强于做事。

概念5：“最正确工具组合”这么个东西不存在

使用哪些工具，完全是你自己说了算的事情。

使用正确的工具，能够帮你将很多繁琐的事情实现自动化。但是使用工具的代价，就是你需要付出学习成本。

概念6：build工具学习成本较高，因此你只需要学习你用的上的工具

只学习那些你用的上的工具，其他的就先缓一缓吧。

Save