gulp-rev和gulp-rev-collector的使用

上一篇文章文章介绍了前端工程化中的缓存问题，以及如何处理缓存问题,比较好的就是gulp-rev正好解决的就是这个问题。
参见上一篇文章，rev做的事情真是如此，他会根据静态文件资源内容生成一个内容散列值，打包出来的文件会增加上这个散列值，与此同时会生成一个json文件用来保存打包前和打包后文件的对应关系。然后将html里面的链接修改为增加散列值的文件就可以了，这样就可以找到资源了。很重要的一点（上一篇文章也介绍了）就是：静态服务器要配置静态资源的过期时间为永不过期。

这样做的目的是：

静态资源在客户端只会请求一次（首次），永久缓存，之后访问不会再发送请求协商304
更改、更新会指定到对应的文件
不删除旧版本（cdn等），以便回滚代码，回滚的时候更新html，同时也不会增加http请求。

但是一般旧版本的文件会在几个月后，或者线上该文件的访问量达到或者超过之前文件的访问量的时候，会选择删除文件以节省空间。

说一下我们要实现的效果以及使用的方法吧：

我们要实现的是将css和js文件加下的文件的打包成增加了散列值的文件，生成对比文件的json，同时更改index.html中的链接

gulp-rev 用来增加散列值

gulp-rev-collector用来替换html文件中的链接

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

在gulpfile.js中：

var gulp = require('gulp');
var rev = require("gulp-rev");
var revColletor = require('gulp-rev-collector');
//revision 用来增加散列值和生成rev.manifest.json
gulp.task("revision",function(){
    return gulp.src([
        "src/**/*.css",
        "src/**/*.js"
    ])
        .pipe(rev())
        .pipe(gulp.dest('build/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/'))

})
//replace 用来热替换链接
gulp.task('replace',function () {
    gulp.src(['build/*.json','./src/index.html'])
        .pipe(revColletor({
            replaceReved:true//必须增加这个参数，否则更改了源文件之后不会热更新
        }))
        .pipe(gulp.dest('./build'))
})

gulp.task('default',["revision","replace"],function () {
    console.log('success')
})

这样就可以将文件打包至manster文件加下，同时生成了一个rev-manifest.json文件,里面是文件对应关系

{
  "css/Alex.css": "css/Alex-c3d6d4d4e9.css",
  "css/manster.css": "css/manster-6f2b1ce9d5.css",
  "js/index.js": "js/index-7bf8f801f1.js",
  "js/test.js": "js/test-5e0352d903.js"
}

之前的index.html和打包替换之后的对比

之前
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/manster.css">
    <link rel="stylesheet" href="./css/Alex.css.css">
</head>
<body>

</body>
<script src="./js/index.js"></script>
<script src="./js/test.js"></script>
</html>

之后
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/manster-7af2727272.css">
    <link rel="stylesheet" href="./css/Alex-c3d6d4d4e9.css.css">
</head>
<body>

</body>
<script src="./js/index-7bf8f801f1.js"></script>
<script src="./js/test-5e0352d903.js"></script>
</html>

gulp-rev和gulp-rev-collector的使用

文章评论