前端构建大法 Gulp 系列 (一)：为何须要前端构建

时间 2019-11-20

原文原文链接

系列目录

咱们都知道使用IDE编写后端程序时，咱们都须要Build, 对.NET来讲，咱们通常须要使用Visual Studio来确保咱们的项目编译经过，并且项目编译经过是对全部程序员的基本要求。java

可是，因为不少后端程序员对前端的不少东西不了解，致使在作WEB项目时出现了一些问题。程序员

JavaScript和CSS的版本问题

咱们都知道 JavaScript和CSS属于静态文件，若是地址不变，浏览器会缓存这些文件，那就意味着当咱们须要改JavaScript或者CSS文件的时候，即便咱们后端改了，那么客户端也是看不到，这个在“JS一统天下”的时代是不可接受的，由于如今几乎全部的WEB 程序都严重依赖JavaScript，而全部的网站都是须要使用CSS的。在我经历过的项目即便是不少年经验的程序员都出现过JavaScript和CSS文件的版本问题，好比客户让修复一个Bug，这个Bug是JavaScript引发的，程序员修复了，或者是客户说改一个背景颜色，但是当咱们给客户部署后或者代码交给客户客户部署时，客户说Bug依然存在，这个时候程序员常常说的话就会出现了 “我本地是好的呀”，最后再找来别人帮忙后，发现原来是没有清除浏览器的缓存，因而有的程序员就赶忙给客户说：“你须要Ctrl+F5 清除浏览器的缓存”。每当我听到这样的话时就像关上灯留给我一屋子黑，首先，有几个普通用户会使用Ctrl+F5？其次，有几个用户愿意去Ctrl+F5?gulp

那么怎么办？我想不少程序员都知道加一个版本号就能够了，这样浏览器就会认为是新的文件，好比原来是 http://www.a.com/app.js 你如今只须要把地址改成http://www.a.com/app.js?v=1.0 便可后端

可是若是这个动做是手动的，那么10次基本上至少有5次程序员会忘掉，那么这就是为何咱们须要前端构建浏览器

JavaScript和CSS的依赖问题

咱们常常出现的另外一个问题，就是JavaScript和CSS的依赖问题，说的通俗点就是JavaScript和CSS的在页面中的顺序问题！缓存

咱们常常发现CSS没起做用，JavaScript的某个变量和方法找不到，有不少状况都是由于引入JavaScript或者CSS的顺序不对，虽然咱们可使用一些RequireJS之类的模块管理，可是依然在不少状况下须要引入不一样的文件，尤为是CSS没有一个好的模块化管理的组件。

那么咱们就须要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具能够大大减小此类问题。

性能优化

咱们都知道浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤为是在咱们如今不少使用前端MVC, MVVM框架的时候，咱们为了前端代码更清晰，结构更合理，咱们就由不少JS文件，无疑又拖慢了网页的速度。为了解决这个问题，所以咱们须要作两件事

文件合并

浏览器须要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有20个JS文件，而每5个须要2S, 那么你光下载JS文件都须要8S，那么网页的性能可想而知，因此咱们须要合并多个文件以减小文件的数量。

文件压缩

咱们知道文件越大，下载越慢，而针对JavaScript和CSS, 里面的空格，换行这些都是为了让咱们读代码时更容易阅读，可是对机器来讲，这些对它没有影响，因此为了减小文件大小，通常的状况咱们都会用工具去掉空格和换行，有时候咱们还会用比较短的变量名(记住这个要让工具最后压缩时作，而源代码必定要保证命名可读性) 来减小文件大小。

而全部的前端构建工具都具备文件合并和压缩的功能。

效率提高

Vendor前缀

在CSS3使用愈来愈多的时候，咱们都知道一些CSS的特性，不一样的浏览器CSS有不一样的前缀，若是咱们手工添加将会很繁琐，而若是使用构建工具，不少构建工具能够自动给我添加CSS的Vendor前缀

单元测试

JavaScript的单元测试在使用MVC或者MVVM的框架后，变得愈来愈容易，而单元测试是质量保证的一个很重要的手段，因此在提交以前，使用构建工具自动跑一遍咱们的单元测试是很是重要的

代码分析

咱们写的JavaScript不少时候会有一些潜在的bug, 好比忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，能够很好的帮咱们检查一些常见的问题。

HTML引用JavaScript或者CSS文件

好比咱们须要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么若是版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤为是在咱们须要切换Debug和production版本时将会有不少额外的工做，那么使用前端构建工具能够很好的解决这些问题。

最后

以上我只是列出了前端构建最经常使用的一些功能，我相信还能够发觉不少构建工具能够替代咱们手工作的事，后面我将详细讲讲如何使用Gulp这个神器来一一解决咱们上面提到的问题。