前端构建工具(理解+使用)

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

安装 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

前端构建工具(理解+使用)_第1张图片

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

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

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

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

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

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

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

前端构建工具(理解+使用)_第2张图片

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

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

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

前端构建工具(理解+使用)_第3张图片

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

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

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

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

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

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

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

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

毕竟,这不就是为什么我们做这个吗?

 

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

你可能感兴趣的:(前端知识)