Featured image of post gulp-rev解决浏览器缓存问题

gulp-rev解决浏览器缓存问题

字数总计: 821 阅读时长: 2 分钟   阅读量:1152

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。

gulp-rev则会根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。

通过gulp脚本部署, 就可以做到当我们文件内容发生改变时, 浏览器读取新文件,而不会因为缓存问题,页面无法立即刷新,以下以css, js文件版本控制为例:

安装插件依赖

推荐使用gulp-revgulp-rev-collector 插件

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector

CSS,JS文件版本控制

静态资源存放在public目录,版本映射文件存放在rev目录,根据具体目录自行修改

var gulp = require('gulp');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');

gulp.task('rev-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(rev())  // 对css文件MD5
        .pipe(gulp.dest('./public'))
        .pipe(rev.manifest())   //生成映射文件存放在rev/css目录
        .pipe(gulp.dest('rev/css'));
});

gulp.task('rev-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(rev())  // 对JS文件MD5
        .pipe(gulp.dest('./public'))
        .pipe(rev.manifest()) //生成映射文件存放在rev/js目录
        .pipe(gulp.dest('rev/js'));
});

执行完以上两个任务后,就可以在rev/js, rev/css找到rev-manifest.jsonMD5映射文件,形如:

{
  "css/index.css": "css/index-704b29f56c.css",
  "js/main.js": "js/main-fa5d099be3.js"
}

根据映射文件替换HTML内容

gulp.task('rev-html', function() {
    //读取rev目录下的rev-manifest.json文件,替换引用的css,js路径
    return gulp.src(['rev/**/*.json', './public/**/*.html'])
        .pipe(revCollector({
            replaceReved: true,//允许替换, 已经被替换过的文件
        }))
        .pipe(gulp.dest('./public'));
});

创建Gulp默认任务(可选)

以上操作完成后,就可以直接将public目录部署到服务器上即可,但每次都要执行3条命令太麻烦,所以我们可以创建个默认任务,之后执行gulp命令即可一键完成。

首先rev-css和rev-js任务可以是并行的,rev-html必须在前面两个任务完成后才执行,所以我们这里可以安装gulp-run-sequence插件来控制任务的串并行。(或者使用gulp 4.X版本的gulp.parallel, gulp.series

  1. 安装gulp-run-sequence
npm install --save-dev gulp-run-sequence
  1. gulp脚本
var runSequence = require('gulp-run-sequence');
// 先压缩css和js文件后,在执行html替换(要确保MD5之后)
gulp.task('default', function(cb) {  
    runSequence(['rev-css','rev-js'], 'rev-html', cb);
})

跳转评论 评论

Nickname
Email
Website
0/500
0 comments