各种前端build工具你真的懂吗？

以下整理仅用于个人学习

说起工具，你们估计跟我一样会想到一堆，例如：node、NPM、Grunt、Gulp、Bower、Webpack、Browserify、Yeoman、Brunch…但有些也只说说出个名字而已，具体干嘛的，不晓得。工具很多，你要是像一个个都学会，那还真费点时间，最好是用到什么学什么，自己用的顺手就好。

要想弄明白这些工具是什么，首先要明白以下几点：
第一、build工具的两大核心功能，就是“安装&做事”
工具是用来用的，但是用来干嘛，各种工具有各种工具的用途，而开发工具从本质上来说做的事情就两个：帮你安装东西和帮你做事。
首先说说安装类工具，例如npm、Bower和Yeoman几乎什么东西都能装，它们可以用来安装前端库像angular.js或是React.js;它们可以为你的开发环境安装服务器；它们可以安装测试库；它们甚至还可以帮你安装其他的前端开发工具。简而言之，就是任何你能想到的与代码有关的东西，它们都能安装。
而做事类工具的目标则是，在web开发中帮你完成自动化。例如：Grunt、Webpack和Gulp等。而每一些工具做的事情也不尽相同，一些工具，擅长处理那些你所指定的任务，例如Grunt和Gulp等工具；还有一些工具，只专注于做一件事情，例如处理Javascript的以来，例如Browserify和Require.js等工具。

对常用工具小小分个类：
安装类工具：Npm、Bower、Yeoman等
做事类工具：node、Grunt、gulp、Webpack等

第二、build工具的“祖宗”是node和Npm
node和Npm负责安装和运行所有这些工具，因此你的所有项目中都会有它们的身影。它们一个负责安装，一个负责帮你做事情。
npm可以安装angular.js和React.js等库，它还可以安装服务器，让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具，帮你完成很多事情，例如简化代码。
而node，则是帮你完成事情的，例如运行JavaScript文件，以及服务器等。
如果你刚刚开始学习，那么node和npm都是必学的东西。随着你的项目不断丰富，你将会逐渐知道这两个工具的极限能力。当它们无法满足你的需要的时候，就是你需要开始安装其他工具的时候了。

第三、build其实就是production-ready版本的应用
我们开发时习惯把JavaScript和css拆分成独立的文件。
独立文件的好处，是让你可以专注于编写针对性较强的代码，让每一部分代码只针对一个问题，以免日后代码多到让你自己都难以管理。但是当你的应用准备好被推向市场的时候，项目内存在多个JavaScript或是css文件并不是一个好主意。当用户访问你的网站的时候，每一个文件都需要独立的HTTP请求，这会让站点加载速度下降。

解决方法就是，给项目创建“build”，它要将所有css文件合并成一个文件，然后再合并JavaScript文件。这样一来，你就可以将文件完成最小化。要想创建这个build，你需要使用build工具。

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

有的时候，一个安装类工具也能运行文件。npm就是这样，它也能运行命令和脚本，不仅仅是安装文件。

第五、“最正确工具组合”这么个东西不存在
使用哪些工具，完全是你自己说了算的事情。随意组合，自己用的顺手就好。

第六、build工具学习成本较高，因此你只需要学习你用的上的工具
学习任何一种新东西，最好的方式就是进行实践。例如，不要为了学习Grunt而去学习，你可以在你的项目中去尝试运用。

第七、所有build工具目标都一样：通过对大量低技术含量任务完成自动化，让你的工作变得更轻。
使用build工具最大的好处之一，就是在保存了一个文件之后，你就能创建一个新的build，并且将其发送到你的浏览器中。它能够显著的提升前端开发流程的速度。
那么我们应该在配置和调试build工具的时候，应该付出多少精力？很简单，如果你对当前工具的效果感到满意，那就可以停止配置了。