前端构建工具（理解+使用）

一、构建工具可以做什么？

安装 vs 做事情

1、安装包工具：例如：npm、Bower，Yeoman可以安装几乎所有的东西。

他们可以安装前端框架，比如Angular.js或者React.js。

他们可以为你的开发环境安装服务器。

他们可以安装测试框架。

他们甚至帮你安装其他的前端构建工具。

2、做事情的工具：比如Grunt、Webpack、Require.js、Brunch和Gulp。这些工具有些复杂。
做事情的工具的目的就是自动化，它避免了前端开发中的烦琐事和一些易于犯错的地方。

下面就是一些我用“做事情”工具自动化完成的一些任务：

1.替换一个文件中的文本字符串
2.创建一个目录然后往这个目录中移动一些文件
3.用一条命令执行单元测试
4.当我保存文件时刷新我的浏览器
5.把我所有的JavaScript文件打包成一个文件，把我所有的CSS文件合并成一个文件
6.压缩我的Javascript文件以及我的CSS文件
7.修改网页中的script标签的位置

二、所有构建工具的鼻祖是Node和npm

Node和npm安装和运行所有的这些构建工具，所以你在项目中总是可以看到他们。正因如此，许多开发者在他们安装另外工具时都会多次使用到这两个工具。

三、安装 vs 做事情   之间的界限可能是模糊的

没有工具只做一件事情。他们都混杂着一个安装和做。但是通常而言，一个工作倾向于做一件事多于另一些事。

开发者经常将JavaScript和css文件分为多个文件。每一个文件都可以让你专注于写某一个模块的功能。这样就可以减少你阅读代码的认知负担。（如果你觉得把文件分为多个文件有点迷惑的话，你想想假如你把一个文件写成5000行时，你怎么去读呢，这是你就知道分散文件的好处了）

但是当你需要把你的应用上线时，多个JavaScript和CSS文件是不现实的。当用户访问你的网站时，每一个js或者css文件都会发起一个新的http请求，这会让你的网站加载起来很慢。

所以为了改进这个问题，你可以创建一个build文件，这个文件把所有的css文件合并到一起，js文件也都合并到一个文件。这样，你就减少了用户请求的数量。为了创建build文件，你就需要一个构建工具。

下面就是开发应用中的一个快照。注意它包含5个script标签和3个link标签了吗？如果你看左侧，注意到开发文件夹下有10个文件了吗？

然后下面就是同一个应用构建完之后的代码情况。

注意到我们只有一个script和一个link标签了吗？然后开发文件夹中只有4个文件了吗，之前我们可是有10个文件呢。

应用跟之前是一模一样的，我们只不过把他转化成一个称之为构建之后的代码小包。

你可以想知道为什么需要构建呢，难道就是为了节省用户几毫秒的时间吗？好吧，如果你创建了属于你或者几个人的网站的话，你不需要有这些困扰。生成一个构建之后的应用只有在高访问量的情况下才有必要。（或者那些你觉得以后可能会被高访问）

如果你正在学习开发或者仅仅在开发一个流量不怎么高的网站的话，生成一个构建的应用可能不是很有必要。

 四、构建工具有一个陡峭的学习曲线，所以只学那些必要的部分

过早的复杂性会拖慢你的脚步。

五、有时候不是你不够聪明，而是文档很糟糕。

对于很多构建工具，文档一般是不健全的。有时候就连最基本的功能都很难搞清楚怎么去实现。

你需要记住的是对于构建工具来说，很少有预先定义好的构建工具组合。你会发现开发者们都通过不同的方式实现了同样的结果 — 就好像有时候在stackoverflow上你会发现对于同一个问题有很多不同的答案。

这当然很令人烦恼，同时他也给你提供了一个机会去放松一下你的编码思维，然后去实现一些创造性的东西。

毕竟，这不就是为什么我们做这个吗？

 

原文：https://www.jianshu.com/p/e290f9f53b7e