【gulp】前端静态资源加MD5或版本号，防止缓存，并替换引用地址

本文链接：https://blog.csdn.net/yu17310133443/article/details/80338323

一. 最后实现的效果如下：

<script type="text/javascript" src="resource/js/jquery-3-a46fb81762.3.1.min.js"></script>
<script type="text/javascript" src="resource/js/javascript-a24740cd73.js"></script>
<script type="text/javascript" src="resource/js/detailsPage-7dfc17b306.js"></script>

二.安装

npm install –g gulp 

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

三.目录下创建gulpfile.js，内容如下：

var gulp = require('gulp'),
	    runSequence = require('run-sequence'),  
    rev = require('gulp-rev'),  
    revCollector = require('gulp-rev-collector')
gulp.task('script',function(){
  gulp.src('resource/js/*.js')
    .pipe(rev())
    .pipe(gulp.dest('./View/resource/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./View/resource/js'));
});
gulp.task('style',function(){
  gulp.src('resource/css/*.css')
    .pipe(rev())
    .pipe(gulp.dest('./View/resource/css'))
	    .pipe(rev.manifest())
    .pipe(gulp.dest('./View/resource/css'));
}); 
gulp.task('revHtmlJs', function () {  
    return gulp.src(['./View/resource/js/*.json', './*.html'])  
        .pipe(revCollector())  
        .pipe(gulp.dest('./dist'));  
});
gulp.task('revHtmlCss', function () {  
    return gulp.src(['./View/resource/css/*.json', './dist/*.html'])  
        .pipe(revCollector())                         //替换html中对应的记录  
        .pipe(gulp.dest('./View'));                     //输出到该文件夹中  
});

//开发构建  
gulp.task('dev', function (done) {  
    condition = true;  
    //依次顺序执行  
    runSequence(  
        ['script'],  
        ['style'],
        ['revHtmlJs'],  
        ['revHtmlCss'], 
        done); 
});

四. 执行gulp dev就可以了

如果想生成加版本号的例如下面效果：

"/css/style.css" => "/dist/css/style.css?v=1d87bebe"
"/js/script1.js" => "/dist/script1.js?v=61e0be79"
"cdn/image.gif" => "//cdn8.example.dot/img/image.gif?v=35c3af8134"

可修改一下文件：

1. 打开node_modules\gulp-rev\index.js

第133行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

2.打开node_modules\gulp-rev\node_modules\rev-path\index.js

10行 return filename + '-' + hash + ext;
更新为: return filename + ext;

3.打开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];

更改后在执行gulp dev 就可以了！