gulp-rev-append 静态资源添加后缀,清理缓存

https://github.com/bustardcelly/gulp-rev-append

安装插件

npm install gulp-rev-append --save-dev

gulpfile.js

var rev = require("gulp-rev-append");//引入插件
gulp.task("rev",function(){//任务
    gulp.src(‘F:/test/myproject/**/*.html‘)
    .pipe(rev())
    .pipe(gulp.dest(‘./dist‘));
});

html

<script type="text/javascript" src="js/[email protected]@hash"></script>

效果

注意事项:

这里作者说到文件后面加参数(xxx.js?v=HASH)的方法会使某些使用proxy cache的资源失效,而更改文件名(XXX_HASH.js)的方式不会

时间: 2024-10-22 22:25:27

gulp-rev-append 静态资源添加后缀,清理缓存的相关文章

gulp教程之静态资源压缩

1 创建项目 安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件,项目目录如下: 2 压缩插件简介 gulp-useref 合并html里面的js/css gulp-concat用于合并文件,把也就是多个文件合并到一个文件中,以节省存储空间 gulp.spritesmith 图片合并成雪碧图 3 本地安装插件 安装gulp-useref npm install gulp-useref --save-dev 安装gulp-concat n

动态script标签同步加载 ps:无打包编译,静态实现静态资源入口动态配置,无编译打包静态资源添加版本号

/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的文件信息注意,由于css是后来加载的,所以页面会存在无样式的页面骨架闪烁问题,可以在头部head标签里加个body{opacity:0},在css文件中再改为body{opacity:1} */ function noAsyncScriptTag() { var obj = { pubPath: "

js添加后缀防止缓存

jsp页面: 时间戳的话需要引入: <%@ page import="java.util.Date"%> <script type="text/javascript" src="${pageContext.request.contextPath}/js/quickpay.js?time=<%= new Date().getTime() %>"></script> //未测试 <script t

前端工程精粹(一):静态资源版本更新与缓存

本文从一个全新的视角来思考web性能优化与前端工程之间的关系,通过解读百度前端集成解决方案小组(F.I.S)在打造高性能前端架构并统一百度40多条前端产品线的过程中所经历的技术尝试,揭示前端性能优化在前端架构及开发工具设计层面的实现思路. 性能优化原则及分类 笔者先假设本文的读者是有前端开发经验的工程师,并对企业级web应用开发及性能优化有一定的思考,因此我不会重复介绍雅虎14条性能优化原则.如果您没有这些前续知识,请移步这里来学习. 首先,我们把雅虎14条优化原则,<高性能网站建设指南>以及

静态资源请求缓存

静态资源请求是有缓存机制的 , 这是浏览器自带的特性 例如我请求服务器上的某文件 , 但是该文件在我请求后被操作过 , 我再次请求拿到的还是原来的文件 , 你抓包的时候会发现你第二次请求的没走 , 抓不到, 解决方法 就是在get请求后面携带一段不一样的字符串 , 这段字符串没有实际意义 , 你可以是一段哈希字符串 , 可以是时间戳 , 只要保证你请求的不重复就好 原文地址:https://www.cnblogs.com/sunjinggege/p/9962713.html

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

gulp之静态资源的版本控制

最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的喜好,选择工具.至于为什么选择Gulp,因为Grunt的gruntfile配置真的很头大好吗!简直看到头晕晕,但是还是有不少人喜欢这种方式的.然后FIS真心很强大,你所需要的,基本它都提供了,并且做得很好很简单,如果你急于马上使用可以赶紧去看看.而我为什么不用呢,感觉可能是因为,有点黑盒子?哈哈哈.

gulp管理静态资源缓存

前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,size一栏是from cache,也就是直接使用了本地的资源,而没有向服务器请求.这样做的好处是提升页面渲染速度,坏处是当服务器的对应的文件发生变化时,浏览器却还是使用缓存,造成布局混乱的问题. 解决办法 一个比较原始的办法是在修改了文件之后,手动改变文件名称,然后再在html手动更新资源的path

Gulp:静态资源(css,js)版本控制

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩) 文件目录结构 html模板文件 <html> <head> <link rel="stylesheet" href="../styles/one.css"> <link rel="stylesheet" href=&qu