网站开发时，每次css或js文件修改后，阅读器因有缓存而没法实时的出现最新的页面内容，很可能导致页面混乱。

处理办法：

方法一：可以通过js自动给html添加版本号

 <script type="text/javascript">
document.write("<link rel='stylesheet' type='text/css' 
href='/css/layout.css?v="+new Date().getTime()+"'>"); 
</script>

方法二：若是jsp页面，可以使用java代码生成时间戳（若是jsp页面用方法一也行，但此方法更方便）

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

方法三：使用其他的方法添加版本号，如用node.js自动配置等

ps：我们清除缓存的目的是为了及时看到页面的更新情况，当我们将页面上线时（即部署到正式环境，不会再做更改），建议把版本号固定，因为有缓存的页面访问更快，需要更新的时候再更换下固定版本号。

可以用gulp给html引入的css,js文件批量添加版本号

<link rel="stylesheet" href="css/index.css"><script src="js/index.js"></script>

这里介绍采用gulp工具自动添加CSS版本号的方法，添加完后的效果

<link rel="stylesheet" href="css/index.css?v=d917434f5d"><script src="js/index.js?v=1513b45ae5">
</script>

1、安装gulp和gulp插件

已安装node和npm包环境下
初始化项目
npm init
安装gulp
npm install --save-dev gulp     // v3.9.1 安装插件
npm install --save-dev gulp-rev    
// v8.1.1  版本号生成插件npm install --save-dev gulp-rev-collector  
// v1.3.1 替换版本号路径插件npm install --save-dev run-sequence  
// v2.2.1 同步执行任务

2、项目根目录下创建gulpfile.js文件

//引入gulp和gulp插件var gulp = require('gulp'),     
    rev = require('gulp-rev'),  
    revCollector = require('gulp-rev-collector'),     
    runSequence = require('run-sequence');   
    
//CSS文件生成版本号(hash编码),并将所有带有版本号的文件放入
rev-manifest.json中gulp.task('revCss', function(){         
//gulp.task--定义一个gulp任务；revCSS--定义该任务的名称，起任何名称都可以
    return gulp.src('css/*.css')     //gulp.src--要操作的源文件路径
        .pipe(rev())      //定义一个流，将所有匹配到的文件名全部生成相应的版本号
        .pipe(rev.manifest())       //把所有生成的带版本号的文件名保存到json文件中
        //把json文件保存到指定的路径，即src下面的css文件，没有该文件，会自动创建});
        .pipe(gulp.dest('rev/css'));    
        //CSS文件生成版本号,并将所有带有版本号的文件放入json中
        gulp.task('revJs', function(){    return gulp.src('js/*.js')
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});
//将html文件中的css,js文件引入路径全部替换成带有版本号的
gulp.task('revHtml', function () {    return gulp.src(['rev/**/*.json', './*.html'])   
//gulp.src--第一个参数：生成的json文件的路径，
//我这里将所有的json文件，js和css,都选中；第二个参数：要替换css,js文件(路径)的HTML文件
        .pipe(revCollector())
        .pipe(gulp.dest('./'));       
        //html更换css,js文件版本，更改完成之后保存的地址
        });
        //开发构建gulp.task('default', function (done) {
    condition = false;
    //需要说明的是，用gulp.run也可以实现以上所有任务的执行，只是gulp.run是最大限度的并行执行
    //这些任务，而在添加版本号时需要串行执行（顺序执行）这些任务，故使用了runSequence.
    runSequence(   
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
});

3、修改插件配置，因插件版本更新，更改的行数可能会略有差异

1、路径 node_modules/gulp-rev/index.js
第135行  manifest[originalFile] = revisionedFile;
更改为   manifest[originalFile] = originalFile + '?v=' + file.revHash;
2、路径 node_modules/gulp-rev-collector/index.js
第40行 var cleanReplacement=path.basename(json[key]).replace(new RegExp( opts.revSuffix ),'' );
更改为   var cleanReplacement=path.basename(json[key]).split('?')[0];
第173行  regexp: new RegExp( prefixDelim + pattern, 'g' ),
更改为   regexp: new RegExp( prefixDelim + pattern+'(?v=w{10})?', 'g' ),
3、路径 node_modules/rev-path/index.js
第9行    return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
更改为   return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

运行gulp

<link rel="stylesheet" href="css/index.css?v=266e468392"><script src="js/index.js?v=1513b45ae5">
</script>

目录结构

tips：若不修改插件的配置，生成的效果会是如下：

<link rel="stylesheet" href="css/index-9dfb6111ef.css"><script src="js/index-1513b45ae5.js">
</script>

执行gulp命令后的效果

<link rel="stylesheet" href="css/index-9dfb6111ef.css"><script src="js/index-1513b45ae5.js">
</script>

这不是我们需要的效果

3.更改gulp-rev和gulp-rev-collector

打开node_modulesgulp-revindex.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打开nodemodulesgulp-rev
odemodules
ev-pathindex.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;

打开node_modulesgulp-rev-collectorindex.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace
(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] 
!== path.basename(key) ) {

再执行gulp命令，得到的结果如下(效果正确):

<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>

但是假如我们更改了css和js后，再执行gulp命令，得到的结果会如下:

<link rel="stylesheet" href="../css/default.css?v=33379df310?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594?v=3a0d844594"></script>

有没有发现，会在版本号后面再添加一个版本号，因为gulp只替换了原来文件名，这样又不符合预期效果了，所以我们想到，还需要修改插件的替换正则表达式。

4.继续更改gulp-rev-collector

打开node_modulesgulp-rev-collectorindex.js
第107行 regexp: new RegExp( '([/'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([/'"])' + pattern+'(?v=w{10})?', 'g' ),

现在你不管执行多少遍gulp命令，得到的html效果都是

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4"><script src="../js/app.js?v=344594">
</script>

附上改过后的node_modules文件

node_modules.rar

原文出处：[ 2KB.COM ]

原文地址：http://www.2kb.com/news/txtlist_i4820v.html

版权声明：转载请附上原文链接！

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务