Gulp应用场景
我们先说说 平时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应用场景的更多相关文章
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- Vue ES6 Jade Scss Webpack Gulp
一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...
- Gulp探究折腾之路(I)
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- [译]为什么我要离开gulp和grunt转投npm脚本的怀抱
原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855 ...
- gulp使用小结(二)
接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...
- gulp使用小结(一)
这篇文章不会介绍 gulp 的起源.发展:不会去一个个讲解 gulp API:也不想出现大段大段的 gulpfile.js 代码:更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用 ...
- 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨
先探讨方案,后续再实现. gulp打包前端教程配置:http://www.cnblogs.com/EasonJim/p/6209951.html 可能存在以下场景: 1.整个服务端采用接口的形式暴露给 ...
- Gulp探究折腾之路(I)2
文/晚晴幽草(简书作者)原文链接:http://www.jianshu.com/p/9768a4dc7cf7著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 前言: gulp是前端开发过 ...
- laravel 中 与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
随机推荐
- 利用原生态的(System.Web.Extensions)JavaScriptSerializer将mvc 前台提交到controller序列化复杂对象
主要代码如下: public JsonResult Test() { string s = Request.Form.ToString(); JavaScriptSerializer jss = ne ...
- debug.keystare找不到的解决办法[转]
重装系统之后,丢失了debug.keystore,找了很久都没有找到,根据网上所讲的只要重新运行一个android项目;就会在avd中生成一个新的debug.keystroe,此法也没解决,索性直接重 ...
- 吴裕雄 08-MySQL创建数据表
MySQL 创建数据表创建MySQL数据表需要以下信息:表名表字段名定义每个表字段 语法以下为创建MySQL数据表的SQL通用语法:CREATE TABLE table_name (column_na ...
- Python自动化运维开发实战 三、python文件类型
导语: python常用的有3种文件类型 1. 源代码 py 2. 字节代码 pyc 3. 优化代码 pyo 源代码: python源代码的文件以”py"为扩展名,由python程序解释,不 ...
- echart生成饼状图
//绘制图表. echarts.init(document.getElementById('main')).setOption({ tooltip : { trigger: 'item', //触发类 ...
- workerman Channel组件全局广播
<?phpuse Workerman\Worker; require_once '../../web/Workerman/Autoloader.php';require_once '../../ ...
- vue 模拟下拉树
// 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...
- cakephp 如何在一个模型里调用另一个模型
$admin_users = ClassRegistry::init('AdminUsers'); $admin_name = $admin_users->find('list',array( ...
- series of Nimble
[nimble] series方法用于串行执行多个异步任务,通过npm可安装nimble. Series works similarly to parallel, only it runs each ...
- 【C++】cout未刷新缓冲区仍会输出的问题
众所周知,cout是一个流对象,管理一个缓冲区.当使用<<操作符输出字符串时,字符串不是直接被输出到屏幕上,而是首先被插入到该流的缓存(buffer)中.而只有当缓冲区被刷新时,字符串才会 ...