gulp管理静态资源缓存

前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的。

从上面这张图片可以看出,浏览器加载css,js等资源时,size一栏是from cache,也就是直接使用了本地的资源,而没有向服务器请求。这样做的好处是提升页面渲染速度,坏处是当服务器的对应的文件发生变化时,浏览器却还是使用缓存,造成布局混乱的问题。

解决办法

一个比较原始的办法是在修改了文件之后,手动改变文件名称,然后再在html手动更新资源的path名称。打个比方,你有一天更新了a.css的样式,然后加个日期后缀,把它重命名为a-1221.css,同时在应用这个css的html中改成:

<link href="./css/a-1221.css" rel="stylesheet"/>

这时,但浏览器发现需要加载这个样式时,发现自己只有a.css,没有a-1221.css,就会向服务器发起请求了。不过,很明显,这种活大家是都不愿意干的,尤其是css文件一多的时候,绝对懵逼,所幸我们可以让gulp来帮我们完成这些乏味的工作。

gulp-rev 和 gulp-rev-collector

这是两个gulp的插件,gulp-rev可以根据静态资源的得出文件的hash值,当文件内容发生改变时,这个hash值也会发生变化。并生成一个json文件,大概长这个样子:

{
    "base/index.css": "base/index-c52f09f203.css"
}

文件的后缀变成了这个文件的hash值。gulpfile.js中的代码如下:

var rev = require(‘gulp-rev‘);
var gulp = require(‘gulp‘);
gulp.task(‘revCss‘, function(){
  return gulp.src(cssUrl)//你存放css的目录
 .pipe(rev())
 .pipe(rev.manifest())
 .pipe(gulp.dest(‘rev/css‘));//在rev/css目录下生成json文件
 });

这个插件只解决了问题的一部分,也就是,把文件变动和hash值关联了起来,另一部分改变html的请求路径还要靠第二个插件gulp-rev-collector来完成。这个插件完成的事情也很简单,就是把html中的资源路径,通过正则匹配,替换成更新后的路径。代码如下:

var gulp = require(‘gulp‘);
var revCollector = require(‘gulp-rev-collector‘);
 gulp.task(‘revHtml‘, function () {
  return gulp.src([‘rev/**/*.json‘, ‘views/*.html‘])
 .pipe(revCollector())
 .pipe(gulp.dest(‘views/inc/‘));
});

所以这两个插件就解决问题了吗?可惜并不是这样。因为你的css文件名并没有更改,还是原来的a.css,所以还需要一个插件帮我们解决重命名的问题。比如用来重命名文件的gulp-rename。

var rename = require("gulp-rename");
var json = require(‘./rev-manifest.json‘);//rev生成的文件

gulp.task(‘rename‘,function(){
  var json = require(‘./rev/css/rev-manifest.json‘);
  var Path = require(‘path‘);
  gulp.src("static/css/*.css")
  .pipe(rename(function (path) {
    path.basename  = json[path.basename + ‘.css‘].replace(‘.css‘, ‘‘);//改掉css文件名为含有hash值的文件名
  }))
  .pipe(gulp.dest("./dist"));
})

查询参数管理缓存

查询参数这种方法适用于前后端不分离的项目,因为这时再去重命名静态文件就会显得很麻烦。所以出现了这种做法,就是在静态资源发生变化时,文件名不改变,但是html中请求路径的查询参数会发生变化,像下面这样:

<link rel="stylesheet" href="/css/style.css?v=2h3h2ar">

这个查询参数v对于后台来说,没有什么意义,你完全可以改成a,b,c。但是当查询参数的hash值发生变化时,却会让浏览器去向服务器发起请求,从而更新缓存。如果你想用这种方式,可以使用gulp-rev-querygithub)插件和gulp-rev-collector-query,将文件名转换成查询字符串。(插件的一个bug是对于.min.css会解析错误)

{
  "base/index.css": "base/index.css?v=1ead88a42c"
}

下面是我参考作者的写的一个,解决了min.js的问题,其实就是改了正则:


var through = require(‘through2‘);

module.exports = function(ver) {
    var ver = ver || ‘v‘
    // convert a-xxxxxxxx.css to a.css?ver=xxxxxxxx
    function hashToQuery(file) {
        var content = new String(file._contents);
        content = content.replace(/(.+)\-(.{7,10})(\..+)"/g, function(match, p1,p2,p3,offset,string){
            return  `${p1}${p3}?${ver}=${p2}"`
          });
        file._contents = new Buffer(content);
        file.ver = ver;
        return file;
    }
    return through.obj(function(file, encoding, callback) {
        callback(null, hashToQuery(file));
    });
};

最后,祝大家圣诞快乐!

原文地址:https://www.cnblogs.com/imgss/p/8084547.html

时间: 2024-11-10 13:02:40

gulp管理静态资源缓存的相关文章

gulp之静态资源的版本控制

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

.htaccess设置静态资源缓存(即浏览器缓存)

在HTTP标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载.这样, 网站加载速度会更快. 下面的代码都需要放到.htaccess中才能生效. 推荐设置过期时间为一个月, 即: max-age=2592000. 通过FilesMatch设置 <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|css|js)$">Header set Cache-Control "max-a

清除nginx静态资源缓存

之前写过一篇如何配置nginx缓存及手动清除缓存的文章: http://www.cnblogs.com/Eivll0m/p/4921829.html 但如果有大量缓存需要清理,手动一条条清理就比较慢了,所以写了个小脚本进行清理,脚本如下: #!/usr/bin/env python # -*- coding: UTF-8 -*- # data:2015-12-08 # author:eivll0m # 脚本用途:清除nginx静态资源缓存 # 使用方法:将要清楚缓存的url粘贴到/app/adm

变态的静态资源缓存与更新

这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中. 在我的印象中,facebook是这个领域的鼻祖,有兴趣.有梯子的同学可以去看看facebook的页面源代码,体会一下什么叫工程化. 接下来,我想从原理展开讲述,多图,较长,希望能有耐心看完. 让我们返璞归真,从原始的前端开发讲起.上图是一个"可爱"的index.html页面和它的样式文件a.css,用文本编辑器写代码,无需编译,本地预览,确认OK,丢到服

Nginx配置静态资源缓存时间及实现防盗链

环境源主机:192.168.10.158系统:centos 7.4域名:www.wuxier.cn盗链主机:192.168.10.191(使用Nginx+Tomcat实现负载均衡.动静分离的实验主机,点我进行复盘)系统:centos 7.4域名:www.ajie.com 和 www.taobao.com 创建软件包存放目录 [[email protected] ~]# mkdir /root/software [[email protected] ~]# cd /root/software/ [

zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了github https://github.com/zimv/zmNgFrameWork . 而后我又在我的 gulp系列 里分享了 gulp-rev:项目部署缓存解决方案----gulp系列(六) ,也更新了github上gulpStart的rev分支 https://github.com/zimv

LAMP+haproxy+varnish实现网站访问的动静分离及静态资源缓存

实验目标:1.    LAMP节点提供用户动态请求访问,数据库单独有数据库节点提供:2.    LAMP动态网站有两台服务器,提供负载均衡:3.    静态网站服务器节点提供用户的静态资源请求访问:存在两台静态web服务器,其网站静态资源在静态服务器上存放:4.    用户的静态请求访问后缓存在varnish服务器上,实现访问加速5.    前端的haproxy提供反向代理功能,将用户的动态资源请求发送给后端LAMP节点,静态资源请求发往后端静态web服务器:6.    该架构考虑还不健全,如静

HappyAA服务器部署笔记2(nginx的静态资源缓存配置)

我近期对服务器进行了少量改进,虽然之前使用了nginx反向代理之后性能有所提高,但仍然不够,需要使用缓存来大幅度提高静态资源的访问速度. 服务器上的静态资源主要有这些:png, jpg, svg, js, css等.下面,我通过新的nginx配置来实现缓存.对红色的字我会额外进行说明. worker_processes 1; events { worker_connections 1024; multi_accept on; use epoll; } http { include mime.ty

Weex/Vue项目中静态资源缓存处理.md

目录 一.项目缓存问题 二.浏览器本地缓存 三.解决方案 今年公司技术考察,考察了EMAS平台,从而接触了weex,并且为了进行POC测试,大胆采用weex进行新web项目试点.weex内置了vue框架,整体框架与vue一致,好在刚接触了vue一段时间,因此用起来还算顺手,碰到问题weex官方文档没有的,基本都可以参考vue的文档. 一.项目缓存问题 第一次接触这类前后端完全分离的开发模式,一开始的确是一头雾水,一个多月时间,难点一点一点克服,目前进入项目测试阶段,经常碰到bug修复了,测试人员