来自：SDKcn开发者服务平台（微信号：微信号： sdkcnnow）
链接：https://www.sdk.cn/news/5412（点击尾部阅读原文前往）
原文：https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.ugfky3xr2
摘要：即使对于一些经验丰富的开发者来说，诸多的前端工具还是会让他们感到头痛，例如我。解决这个问题的最好办法，就是在概念上理解他们的工作方式，已经他们之间相互配合的方式。
![]()
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页面中修改
Node和npm负责安装和运行所有这些工具，因此你的所有项目中都会有它们的身影。由于这个原因，很多开发者在安装新的工具之前，都会尽可能的尝试使用这两个工具解决问题。
它们两个一个负责安装，一个负责帮你做事情。Node是做事工具，而npm则是安装工具。
npm可以安装Angular.js和React.js等库。它还可以安装服务器，让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具，帮你完成很多事情，例如简化代码。
而Node，则是帮你完成事情的，例如运行JavaScript文件，以及服务器等。
如果你刚刚开始学习，那么Node和npm都是必学的东西。随着你的项目不断丰富，你将会逐渐知道这两个工具的极限能力。当它们无法满足你的需要的时候，就是你需要开始安装其他工具的时候了。
概念3：build其实就是production-ready版本的应用
开发者经常会把JavaScript和CSS拆分成独立的文件。
独立文件的好处，是让你可以专注于编写针对性较强的代码，让每一部分代码只针对一个问题，以免日后代码多到让你自己都难以管理。但是当你的应用准备好被推向市场的时候，项目内存在多个JavaScript或是CSS文件并不是一个好主意。当用户访问你的网站的时候，每一个文件都需要独立的HTTP请求，这会让站点加载速度下降。
解决方法就是，给项目创建“build”，它要将所有CSS文件合并成一个文件，然后再合并JavaScript文件。这样一来，你就可以将文件完成最小化。要想创建这个build，你需要使用build工具。
下图是一个开发阶段的应用，注意到了吗，里面有5个
