前端构建大法 Gulp 系列 (一):为什么需要前端构建
系列目录
我们都知道使用IDE编写后端程序时,我们都需要Build, 对.NET来说,我们一般需要使用Visual Studio来确保我们的项目编译通过,而且项目编译通过是对所有程序员的基本要求。
但是,由于很多后端程序员对前端的很多东西不了解,导致在做WEB项目时出现了一些问题。
JavaScript和CSS的版本问题
我们都知道 JavaScript和CSS属于静态文件,如果地址不变,浏览器会缓存这些文件,那就意味着当我们需要改JavaScript或者CSS文件的时候,即使我们后端改了,那么客户端也是看不到,这个在“JS一统天下”的时代是不可接受的,因为现在几乎所有的WEB 程序都严重依赖JavaScript,而所有的网站都是需要使用CSS的。在我经历过的项目即使是很多年经验的程序员都出现过JavaScript和CSS文件的版本问题,比如客户让修复一个Bug,这个Bug是JavaScript引起的,程序员修复了,或者是客户说改一个背景颜色,可是当我们给客户部署后或者代码交给客户客户部署时,客户说Bug依然存在,这个时候程序员经常说的话就会出现了 “我本地是好的呀”,最后再找来别人帮忙后,发现原来是没有清除浏览器的缓存,于是有的程序员就赶紧给客户说:“你需要Ctrl+F5 清除浏览器的缓存”。 每当我听到这样的话时就像关上灯留给我一屋子黑,首先,有几个普通用户会使用Ctrl+F5? 其次,有几个用户愿意去Ctrl+F5?
那么怎么办?我想很多程序员都知道加一个版本号就可以了,这样浏览器就会认为是新的文件,比如原来是 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这个神器来一一解决我们上面提到的问题。
前端构建大法 Gulp 系列 (一):为什么需要前端构建的更多相关文章
- 前端构建大法 Gulp 系列 (四):gulp实战
前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...
- 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建大法 Gulp 系列 (二):为什么选择gulp
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建大法 Gulp 系列
参考: 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- 前端构建工具gulp使用 (转)
http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...
随机推荐
- iOS可视化动态绘制连通图
上篇博客<iOS可视化动态绘制八种排序过程>可视化了一下一些排序的过程,本篇博客就来聊聊图的东西.在之前的博客中详细的讲过图的相关内容,比如<图的物理存储结构与深搜.广搜>.当 ...
- C# Web应用调试开启外部访问
在用C#开发Web应用时有个痛点,就是本机用VS开启Web应用调试时外部机器无法访问此Web应用.这里将会介绍如何通过设置允许局域网和外网机器访问本机的Web应用. 目录 1. 设置内网访问 2. 设 ...
- 【.net 深呼吸】序列化中的“引用保留”
假设 K 类中有两个属性/字段的类型相同,并且它们引用的是同一个对象实例,在序列化的默认处理中,会为每个引用单独生成数据. 看看下面两个类. [DataContract] public class 帅 ...
- Xamarin+Prism开发详解六:DependencyService与IPlatformInitializer的关系
祝各位2017年事业辉煌!开年第一篇博客,继续探索Xamarin.Forms… 为什么我做Xamarin开发的时候中意于Prism.Forms框架?本章为你揭晓. 实例代码地址:https://git ...
- C++实现线程安全的单例模式
在某些应用环境下面,一个类只允许有一个实例,这就是著名的单例模式.单例模式分为懒汉模式,跟饿汉模式两种. 首先给出饿汉模式的实现 template <class T> class sing ...
- ABP源码分析一:整体项目结构及目录
ABP是一套非常优秀的web应用程序架构,适合用来搭建集中式架构的web应用程序. 整个Abp的Infrastructure是以Abp这个package为核心模块(core)+15个模块(module ...
- Android raw to bmp
Android raw 格式转 bmp 图像 raw 保存的为裸数据,转换时都需要把它转成RGBA 的方式来显示.其中: 8位RAW: 四位RGBA 来表示一位灰度; 24位RAW: 三位RGB相同, ...
- Android 7.1 - App Shortcuts
Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...
- Opserver开源的服务器监控系统(ASP.NET)
Opserver是Stack Exchange下的一个开源监控系统,系统本身由C#语言开发的ASP.NET(MVC)应用程序,无需任何复杂的应用配置,入门很快.下载地址:https://github. ...
- C#中Length和Count的区别(个人观点)
这篇文章将会很短...短到比你的JJ还短,当然开玩笑了.网上有说过Length和count的区别,都是很含糊的,我没有发现有 文章说得比较透彻的,所以,虽然这篇文章很短,我还是希望能留在首页,听听大家 ...