gulp-rev：项目部署缓存解决方案----gulp系列（六)

最新推荐文章于 2024-08-26 08:11:40 发布

weixin_34381666

最新推荐文章于 2024-08-26 08:11:40 发布

阅读量225

点赞数

文章标签： json 前端 ViewUI

引言：

　　前端工程化部署比较重要考虑的一个问题是缓存，可以参考《变态的静态资源缓存与更新》。

　　使用gulp-rev解决的就是《变态的静态资源缓存与更新》提出的问题。

rev会做什么：

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

替换html里静态资源的路径为带有md5值的文件路径，这样html才能找到资源路径。有些人可能会做：静态服务器配置静态资源的过期时间为永不过期。

达到什么效果：

　　静态资源只需请求一次，永久缓存，不会发送协商请求304

　　版本更新只会更新修改的静态资源内容

　　不删除旧版本的静态资源，版本回滚的时候只需要更新html，同样不会增加http请求次数

配置：

　　在系列（五）代码的基础上，再进行扩展。

1.安装：

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

gulp-sync 处理任务异步

2.找到gulp->config.js，配置rev，配置css和js的revJson输出地址:

/* gulp命令会由gulpfile.js运行，所以src和build文件夹路径如下（根目录下） */
var src = './src';     
var dest = './build';  

module.exports = {
    less: {
        all: src + "/less/**/*.less", //所有less
        src: src + "/less/*.less",      //需要编译的less
        dest: dest + "/css",          //输出目录
        rev: dest + "/rev/css",
        settings: {                      //编译less过程需要的配置，可以为空

        }
    },
    images: {
        src: src + "/img/**/*",      
        dest: dest + "/img"
    },
    js: {
        src: src + "/js/**/*",
        dest: dest + "/js",
        rev: dest + "/rev/js"
    },
    clean:{
        src: dest
    },
    rev:{//use rev to reset html resource url
        revJson: dest + "/rev/**/*.json",
        src: "*.html",//root index.html
        dest: ""
    }
}

3.gulp->tasks里修改css和js任务，这里只贴js任务代码（css雷同）:

var gulp = require('gulp');
var config = require('../config').js;
var rev = require('gulp-rev');

gulp.task('js', function(){
    return gulp.src(config.src)
        .pipe(rev())  //set hash key
        .pipe(gulp.dest(config.dest))
        .pipe(rev.manifest()) //set hash key json
        .pipe(gulp.dest(config.rev)); //dest hash key json
});

在输出文件之前执行rev()，输出后的文件就会生成hash码，如图：

执行以下两句会生成一个json，里面存储的是文件原名和生成hash文件名的对应

.pipe(rev.manifest()) //set hash key json

.pipe(gulp.dest(config.rev)); //dest hash key json

4.gulp->tasks里新建rev任务:

var gulp = require('gulp');
var config = require('../config').rev;
var rev = require('gulp-rev');
var revCollector = require("gulp-rev-collector");

gulp.task('rev', function () {
    return gulp.src([config.revJson, config.src])
        .pipe( revCollector({
            replaceReved: true,
        }) )
        .pipe( gulp.dest(config.dest) );
});