web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服务器的压力. 但是有些时候缓存也会带来一些比较诡异的问题,呵呵.关于缓存的文章应该不在少数,不再讨论,本文的重点在于为js和css文件自动添加版本号. 这样做的原因是:首先对于js和css类型的静态文件设置了缓存机制,当文件被更新时,需要强迫浏览器下载修改后的新文件,也就是要更新缓存,而通过为js和

传统的给文件链接添加版本号的方法是使用gulp-rev,这里提出的解决方案是使用python来替代gulp-rev. import os import re import uuid import sys def file_extension(path): return os.path.splitext(path)[1] basePath = sys.argv[1] if len(sys.argv)==1: sys.exit() html_list = [] def find_html(path)

之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件

写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服务器下载新的资源文件. 如果某个 css 文件被多个页面引用,那么我们就需要去每个页面一个一个的去修改,这样做的方式属于重复性的动作,而且有的时候还会漏掉需要修改的页面,所以我们就需要一个自动管理资源文件版本号的功能 先看效果 如何实现 通过扩展HemHelper 类,添加 为 js 和 css 文

前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实现静态资源的版本更新才是正道. 实际开发过程中,我们常用到的功能包括: 1.目标路径的清除: 2.静态资源复制到目标路径: 3.css文件的合并与压缩: 4.js文件的合并与压缩: 5.根据文件的变化添加版本号: 第1.2.3.4几个功能倒是很好解决,今天主要说说gulp实现静态资源自动添加版本号:

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安装 全局安装 $ npm install gulp -g 进入项目跟目录,初始化 npm init , 然后安装: $ npm install gulp 安装插件 sass的编译(gulp-ruby-sass) 自动添加css前缀(gulp-autoprefixer) 压缩css(gulp-clea

本文转载自: gulp自动添加版本号

方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}?nocache=" + version + "\"></script>", "~/Scripts/ControlJS/PuzzleFee/PuzzleFee.js") 方

由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9.0.0) npm install --save-dev gulp-rev-collector (version:1.3.1) npm install --save-dev run-sequence (version:2.2.1) 2.修改gulpfile.js文件 //引入gulp和gulp插件

推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/i

由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: 但是,我们希望的格式是这种: 有大神给出了解决办法,参见如下链接: Gulp自动添加版本号 此篇文章中的修改行数,会随着插件的更新而发生变化,大家可以搜索一下,基本上就是了. 可是随后又出现一个问题,如果重复执行添加版本号的操作,版本号会重复追加到链接后面: <link rel="styles

公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 . 2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件. 通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程: 一. 1. 修改js和css文件 2. 通过对js

由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-collerctor npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector 打包后的效果 "/css/style.css" => "/dist/css/style-1d87bebe.cs

背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css.js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量. 问题 现在问题来了,.htaccess设置的css.js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css.js,在这些css.js缓存未过期之前,浏览器只会

一直在页面写css, 重复写着样式,发现布局中,特别是h5,大量的样式都是margin,padding,width,height, 而,当我们需要给一个标签写样式的时候,避免内联样式,我们又需要取class名,对于英语不是特别好的同学,可能会特别苦恼.好了,有了这款插件,这些都不是问题! #happycss 这是一款可以自动生成css样式的插件,你只需要在 vue中写入 class="w10", 就会自动生成width: 10px; 默认单位为px,如果你需要使用%,请添加如 clas

问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了. 解决: 我的当前版本 "gulp-rev": "7.1.2", "gulp-rev-collector": "1.2.

18:03 2016/4/162分钟 sublime设置自动行尾添加分号并换行:注意:宏文件路径要用反斜杠/,2个\\会提示无法打开宏文件.不需要绝对路径很简单利用宏定义:1.录制宏:由于是录制动作宏,对于文档内容没有具体要求,随便什么格式都可以.本文以图片中的 JS 代码为例进行说明.首先将光标置于代码中任意一行任意位置,点击菜单栏“工具->录制宏” 或用快捷键 “CTRL+ Q”开始录制宏.Sublilme Text 3 用宏自动在行尾添加分号4当看到 Sublime Text 3 左下角状

发现一个在线雪碧图中的图片地位的工具,并且能够自动生成css.spritecow 废话不多说,有图有真相:

网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根目录的,先下载解压好待用 npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ (yuicompressor-2.4.2.jar 这个是WB配置让CSS或者JS自动生成.mincss/.minjs的压缩工具,不是配置LESS的工具哦, 使用很简单不用解压,比我直

本文转载自: 使用compass自动合并css雪碧图(css sprite)