前端构建工具很让人搞不清楚，即使是像我这样的老司机也如此。我们不仅要理解这些工具做了什么，还要搞明白怎么将他们组合起来。
这篇文章讲述了我是怎样弄明白前端构建工具的。我不讲代码层面上，我主要讲一些我脑海中这些工具是如何工作的，以及他们解决了什么问题。
不要被技术吓倒
Node,NPM,Grunt,Gulp,Bower,Webpack,Browserify,Yeoman,Brunch…，前端构建工具太多了，我们不可能全部都学会。
关键是不要慌，要知道这些工具出现的目标就是让你的工作变容易的。
想要理解这些工具是什么、为什么会有这个工具，以及这些工具是怎么用的，你只需要掌握几个概念即可。
前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。
构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。
代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。
文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力，解放了我们的生产力。
概念1 — 构建工具的核心功能无非就两个：安装 vs 做事情。
构建工具做两件事：
安装软件包
做事情
当你遇到一个新的工具时，首先要问你自己的一句话就是：这个工具设计的目的是要帮我安装工具包呢还是要帮我做事情？
安装包工具例如：npm、Bower，Yeoman可以安装几乎所有的东西。他们可以安装前端框架，比如Angular.js或者React.js。他们可以为你的开发环境安装服务器。他们可以安装测试框架。他们甚至帮你安装其他的前端构建工具。
简单说就是，他们安装了几乎所有跟代码相关的东西。
做事情的工具比如Grunt、Webpack、Require.js、Brunch和Grulp。这些工具有些复杂。
做事情的工具的目的就是自动化，它避免了前端开发中的烦琐事和一些易于犯错的地方。
为了做这些任务，他们经常使用他们自己生态链中的软件包和插件。每个工具都以不同的方式写任务。这些工具也并不都是一样的。一些“做”工具师徒处理你的任何任务（Grunt，Gulp等）。其他的工具则专注于一件事情，比如处理Javascript中模块依赖关系的（Browseriry、Require.js等）
有时候你会发现你在一个项目中使用了多个这样的工具。
下面就是一些我用“做事情”工具自动化完成的一些任务：
1.替换一个文件中的文本字符串
2.创建一个目录然后往这个目录中移动一些文件
3.用一条命令执行单元测试
4.当我保存文件时刷新我的浏览器
5.把我所有的JavaScript文件打包成一个文件，把我所有的CSS文件合并成一个文件
6.压缩我的Javascript文件以及我的CSS文件
7.修改网页中的script标签的位置
一旦你理解了一个工具是安装软件包还是做事情的，把他们分门别类也就变得很简单了：
概念2 — 所有构建工具的鼻祖是Node和npm
Node和npm安装和运行所有的这些构建工具，所以你在项目中总是可以看到他们。正因如此，许多开发者在他们安装另外工具时都会多次使用到这两个工具。
Node和NPM也掉进了我们的“做”和“安装”二分法。Node就是做事情的工具，npm就是那个安装工具。
Npm可以安装像Angular或者React.js这样的框架。它也可以给你的应用安装一个服务器来方便你本地开发。它甚至可以安装一些工具来压缩你的代码。
Node，另一方面他可以做的事情还包括运行JavaScript文件，服务器等等。
如果你想开始学习构建工具，那就从Node+npm，好好学。当你的项目越来越大时，Node和npm的功能可能就到达了瓶颈，这时你可以引入另外的构建工具来帮助你。
概念3 — 构建之后的文件仅仅就是一个准生产版本
开发者经常将JavaScript和css文件分为多个文件。每一个文件都可以让你专注于写某一个模块的功能。这样就可以减少你阅读代码的认知负担。（如果你觉得把文件分为多个文件有点迷惑的话，你想想假如你把一个文件写成5000行时，你怎么去读呢，这是你就知道分散文件的好处了）
但是当你需要把你的应用上线时，多个JavaScript和CSS文件是不现实的。当用户访问你的网站时，每一个js或者css文件都会发起一个新的http请求，这会让你的网站加载起来很慢。
所以为了改进这个问题，你可以创建一个build文件，这个文件把所有的css文件合并到一起，js文件也都合并到一个文件。这样，你就减少了用户请求的数量。为了创建build文件，你就需要一个构建工具。
下面就是开发应用中的一个快照。注意它包含5个script标签和3个link标签了吗？如果你看左侧，注意到开发文件夹下有10个文件了吗？
然后下面就是同一个应用构建完之后的代码情况。
注意到我们只有一个script和一个link标签了吗？然后开发文件夹中只有4个文件了吗，之前我们可是有10个文件呢。
应用跟之前是一模一样的，我们只不过把他转化成一个称之为构建之后的代码小包。
你可以想知道为什么需要构建呢，难道就是为了节省用户几毫秒的时间吗？好吧，如果你创建了属于你或者几个人的网站的话，你不需要有这些困扰。生成一个构建之后的应用只有在高访问量的情况下才有必要。（或者那些你觉得以后可能会被高访问）
如果你正在学习开发或者仅仅在开发一个流量不怎么高的网站的话，生成一个构建的应用可能不是很有必要。
概念4 — 安装和做之间的界限可能是模糊的
没有工具只做一件事情。他们都混杂着一个安装和做。但是通常而言，一个工作倾向于做一件事多于另一些事。
有时候一个安装工具也会运行文件。npm就经常这么做。npm可以运行命令和脚本 — 不仅仅是安装文件而已。还有一个工具叫做Yeoman安装构建之前的模板文件，但是它也会根据需要生成一些文件，模糊了安装和做之间的界限。
概念5 — 没有正好的工具组合。
工具之间的组合完全取决于你。
你可以选择不用任何工具。但你要记住：像复制、粘贴、压缩文件和启动服务器等所有相关的事情会很快让你崩溃的。
或者你可以只用Node和npm。对初学者来说这就够了，但是当你的项目越来越大时，你会发现某些需要手动的操作将会越来越多。
或者你可以选择使用一些其他的基于Node和npm的工具。这样的话就相当于Node+npm作为你的应用核心，其他的可以是Grunt+Bower或者Webpack或者Gulp+Bower。
使用一些基于Node+npm的组合工具，可以让你的很多工作自动化。代价就是这些工具都有一个陡峭的学习曲线
概念6 — 构建工具有一个陡峭的学习曲线，所以只学那些必要的部分
开发应用已经很难了。你可能在使用多种编程语言或者多种框架。或者你可能还有一些让人头疼的业务逻辑。所以引入一个工具就相当与给你的项目多了一层复杂度。尤其是那些别人使用构建工具生成的代码。
我的建议就是只学你需要的学的去完成你的工作，其他的看都不要看。
学习新事物的最好方式就是你有一个现实的任务需要去完成。例如，不要去学习如何使用grunt复制文件，相反，只有当你的项目需要你去复制文件时，你再去学习它。
记住：过早的复杂性会拖慢你的脚步。
概念7 — 所有的构建工具都拥有同样的目的：通过自动化那些需要手动完成的工作来让你高兴。
把构建工具用到最高境界的一个标识就是：当你保存好一个文件之后，或者你仅仅在终端敲了一行命令，大量的任务都会自动化帮你完成。
如果你的构建工具依然需要你手动移动文件，改变数值或者执行命令去下载一个新的构建工具时，你就还没有练成构建工具必杀技。
构架工具的一个最大的好处就是仅仅保存一个文件，你就能触发一次自动的构建过程并且把最终的打包文件自动推送给你的浏览器。这可以大大加快你的前端开发工作流程。
所以，你到底需要为配置你的构建工作花费多少精力呢？很简单：当你觉得他做的工作让你happy时。
概念 #8 — 有时候不是你不够聪明，而是文档很糟糕。
我保证不是你。对于很多构建工具，文档一般是不健全的。有时候就连最基本的功能都很难搞清楚怎么去实现。
你需要记住的是对于构建工具来说，很少有预先定义好的构建工具组合。你会发现开发者们都通过不同的方式实现了同样的结果 — 就好像有时候在stackoverflow上你会发现对于同一个问题有很多不同的答案。
这当然很令人烦恼，同时他也给你提供了一个机会去放松一下你的编码思维，然后去实现一些创造性的东西。
毕竟，这不就是为什么我们做这个吗？
作者：Plearner
链接：https://www.jianshu.com/p/e290f9f53b7e
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。