gulp-rev-collector实现版本管理问题

Question

为了应对页面文件缓存问题，这几天使用gulp-rev和gulp-rev-collector为页面css、js添加版本号，但是在使用过程中遇到一些问题：

1. 当我使用gulp监控改动文件的时候，在html文件中的版本号总是落后一个，下面图中右边的27610efafa其实是上一次生成在rev-manifest.json中的版本号，本次生成的为b264d07c16，但是没有替换到html文件中；
   

2. manifest文件能否合成为一个；

3. 如何删除旧版号的css、js文件。

代码如下：

gulp.task('css', function  () {
    gulp.src(css_src)
        .pipe(minicss())
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'))
})

gulp.task('js', function  () {
    gulp.src(js_src)
        .pipe(minijs())
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
})

gulp.task('version', ['css', 'js'], function  () {
    gulp.src(['rev/**/*.json', 'xx.html'])
        .pipe(revCollector({
        }))
        .pipe(gulp.dest('dist/html'))
})

gulp.task('change', function  () {
    gulp.watch(css_src, ['version'])
    gulp.watch(js_src, ['version'])
})

Answer 1

删除css和js，包括图片等等的旧版本,用gulp-clean。 我也遇到了替换html的时候，版本号是上一个生成的版本的问题

---------更新----------

css和js使用同一个rev-manifest.json的方法

.pipe(rev.manifest(path[process.env.NODE_ENV].rev + '/rev-manifest.json',{
                base: path[process.env.NODE_ENV].rev,
                merge: true   // 设置为true
            }))

每次pipe css和js的时候，把merge这个配置项设置为true即可

Answer 2

我也碰到 manifest文件能否合成为一个；这个问题，不知楼主现在有解决方法了吗？

旧文件可以用del建立一个clean任务，每次执行version的时候再执行clean.

gulp.task('clean', function(){
    del.sync('需要清除的目录');
})

gulp.task('version', ['clean','css', 'js'], function  () {
   // 你的代码
})

Answer 3

今天我也遇到了版本滞后的问题，把过程发出来希望能够抛砖引玉。
这是我的gupfile.js文件

//编译less
gulp.task('less', function() {
    return gulp.src('src/**/style-*.less',{base:'./src'})
    .pipe(cached('less'))
    .pipe(less())
    .pipe(autoprefixer('last 6 version'))
    .pipe(gulp.dest('src'));
});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src('src/theme/**/*.css')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('src/rev'));
});

//Html中替换css文件版本
gulp.task('revReplace', function () {
    return gulp.src(['src/rev/**/*.json', 'src/index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('src'));
});

//浏览器刷新    
gulp.task('serve', function() {  
    browserSync.init({  
        //指定服务器启动根目录  
        server: "./src"
    });  
    gulp.watch('src/**/style-*.less',gulp.series('less','revCss','revReplace'));
    gulp.watch("./src/**/*.*").on('change', browserSync.reload);
});

less每次编译之后相应的css、rev-manifest.json文件以及index.html版本号都生成了最新的
最初的信息：

//style-theme-default.less
.dc-top{ background:yellow;}

//rev-manifest.json
{
  "default/style-theme-default.css": "default/style-theme-default.css?v=c72a35494a"
}

//index，html
<link href="theme/default/style-theme-default.css?v=c72a35494a" rel="stylesheet">

我把背景色改为red后

//style-theme-default.less
.dc-top{ background:red;}

//rev-manifest.json
{
  "default/style-theme-default.css": "default/style-theme-default.css?v=47252d25eb"
}

//index，html
<link href="theme/default/style-theme-default.css?v=47252d25eb" rel="stylesheet">

我们来看下index.html和浏览器源码截图：

我们发现火狐下的版本号还是背景色为yellow时候的版本号，但是源文件（index.htmnl）其实已经改变成最新的了。
下面看下dos窗口执行了那些任务

1. browser-sync插件检测到style-theme-default.less发生了变化（changed）

2. 执行less编译任务，生成style-theme-default.css文件，less任务结束

3. 开始revCss任务，生成包含版本号与路径对应的json文件，revCss任务结束

4. 开始revReplace任务，就是替换index.html里面的连接版本号

5. browser-sync检测到index.html发生变化

6. 刷新浏览器

gulp任务执行没有问题，到这里我怀疑是browser-sync插件的问题，我单独在less编译任务那里写了个css注入.pipe(browserSync.stream());，把browserSync.reload改为browserSync.reload()，或者function(){browserSync.reload()}还是无法解决版本滞后问题，更改任务顺序也不行，只能摁两次ctrl+s才能是最新的动态，之后打开360，chrome，ie，每次保存都没有火狐出现的版本滞后问题，至此应该是浏览器兼容问题。

Answer 4

我今晚使用也遇到了同样的问题，每次替换的都是上一个版本。不过找到了问题所在。

gulp.task('css', function  () {
   return gulp.src(css_src)
        .pipe(minicss())
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'))
})

gulp.task('js', function  () {
   return gulp.src(js_src)
        .pipe(minijs())
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
})

gulp.task('version', ['css', 'js'], function  () {
   return gulp.src(['rev/**/*.json', 'xx.html'])
        .pipe(revCollector({
        }))
        .pipe(gulp.dest('dist/html'))
})

这样修改就可以了。

Answer 5

为什么我js在.html页面里没有替换呢？

gulp.src(basePath + '/scripts/page/main.js')

    .pipe(requirejsoptimize({
        mainConfigFile: paths.jsconfig
    }))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest(paths.staticDest + '/scripts/page'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(paths.staticDest + '/rev/jsmain'));
    
    
    gulp.src([paths.staticDest + '/rev/**/*.json', paths.index])
    .pipe(revCollector({}))
    .pipe(minifyhtml())
    .pipe(gulp.dest(paths.staticDest));
    
    
    生成了

只有js不能替换，css是可以替换的