为了应对页面文件缓存问题,这几天使用gulp-rev
和gulp-rev-collector
为页面css
、js
添加版本号,但是在使用过程中遇到一些问题:
当我使用
gulp
监控改动文件的时候,在html
文件中的版本号总是落后一个,下面图中右边的27610efafa
其实是上一次生成在rev-manifest.json
中的版本号,本次生成的为b264d07c16
,但是没有替换到html
文件中;manifest
文件能否合成为一个;如何删除旧版号的
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'])
})
为什么我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是可以替换的
今天我也遇到了版本滞后的问题,把过程发出来希望能够抛砖引玉。
这是我的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窗口执行了那些任务
browser-sync插件检测到style-theme-default.less发生了变化(changed)
执行less编译任务,生成style-theme-default.css文件,less任务结束
开始revCss任务,生成包含版本号与路径对应的json文件,revCss任务结束
开始revReplace任务,就是替换index.html里面的连接版本号
browser-sync检测到index.html发生变化
刷新浏览器
gulp任务执行没有问题,到这里我怀疑是browser-sync插件的问题,我单独在less编译任务那里写了个css注入.pipe(browserSync.stream());
,把browserSync.reload
改为browserSync.reload()
,或者function(){browserSync.reload()}
还是无法解决版本滞后问题,更改任务顺序也不行,只能摁两次ctrl+s才能是最新的动态,之后打开360,chrome,ie,每次保存都没有火狐出现的版本滞后问题,至此应该是浏览器兼容问题。
删除css和js,包括图片等等的旧版本,用gulp-clean。 我也遇到了替换html的时候,版本号是上一个生成的版本的问题
我也碰到 manifest文件能否合成为一个;
这个问题,不知楼主现在有解决方法了吗?
旧文件可以用del
建立一个clean任务,每次执行version
的时候再执行clean
.
gulp.task('clean', function(){
del.sync('需要清除的目录');
})
gulp.task('version', ['clean','css', 'js'], function () {
// 你的代码
})