添加js,css 版本号?v= hash

node_modules设置

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

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

image

在node_modules\rev-path\index.js 目录中第10行:改成如下:

b.打开 nodemodules\gulp-rev\nodemodules\rev-path\index.js

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

image

c.打开 node_modules\gulp-rev-collector\index.js

31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) { 更新为: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {}

 

d.压缩处理模块JS

 

gulp.task('moduleJs', function () {
    for (var i = 0; i < moduleJs.length; i++) {
        //example:oauth_web/dist/static/js/login/login.min.js;
        del(moduleJs[i].basedir + 'dist/'+'static/'+'js/'+moduleJs[i].name + '/' + moduleJs[i].name+'.min.js');
        del(moduleJs[i].basedir + 'concat/'+'static/'+'js/'+moduleJs[i].name + '/' + moduleJs[i].name+'.js');
        if (!moduleJs[i].deps) {
            moduleJs[i].deps = [];
        }
        var resource = moduleJs[i].deps.concat(moduleJs[i].basedir + 'static/' + "js/"  + moduleJs[i].name + '/' + moduleJs[i].name + '.js');
        console.log(resource); //获取原文件的位置
        gulp.src(resource)
            .pipe(gulpConcat(moduleJs[i].name + '.js'))//合并所有js到模块名称.js
            .pipe(gulp.dest(moduleJs[i].basedir + 'concat/' + 'static/' +'js/' + moduleJs[i].name))    //输出合并后单没有压缩模块到.js到文件夹
            .pipe(rename({suffix: '.min'}))
            .pipe(uglify())//压缩
            .pipe(rev())   //加MD5后缀
            .pipe(gulp.dest(moduleJs[i].basedir +'dist/'+'static/'+'js/'+moduleJs[i].name))  //输出
            .pipe(rev.manifest())   //生成映射json文件
            .pipe(gulp.dest(baseRev + moduleJs[i].basedir +'static/' + 'js/' + moduleJs[i].name));
    }
});

 

e.压缩相应html时引入json文件添加对应的hash版本号

 

/**
* 引入版本号,压缩html
*/
gulp.task('miniHtml', function () {
for (var i = 0; i < moduleHtml.length; i++) {
if (!moduleHtml[i].revJs) {
moduleHtml[i].revJs = [];
}
     //引入之前生成的版本号JSON文件 var revJson = '/*.json';
        var revModuleJs = baseRev + moduleHtml[i].basedir +'static/' + 'js/' + moduleHtml[i].name + revJson;
var revModuleCss = baseRev + moduleHtml[i].basedir + 'static/'+ 'css/' + moduleHtml[i].name + revJson;
var resHtml = moduleHtml[i].basedir + moduleHtml[i].name + '.html'; //需要处理html地址
var resource = moduleHtml[i].revJs.concat([revModuleJs,revModuleCss]);
if (moduleHtml[i].revCss) {
resource = resource.concat(moduleHtml[i].revCss);
}
resource = resource.concat(resHtml);
console.log(resource);
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
//生成合并的文件
gulp.src(resource)
.pipe(htmlreplace({
'css':{
src:'static/' + 'css/' + moduleHtml[i].name + '/' + moduleJs[i].name + '.css',
tpl:'<link rel="stylesheet" href="%s" data-res="eebbk">'
},
'js': {
src:'static/' + 'js/' + moduleHtml[i].name + '/' + moduleJs[i].name + '.js',
tpl:'<script src="%s"></script>'
}
}))
.pipe(revCollector()) //添加版本号
.pipe(gulp.dest(moduleHtml[i].basedir+'concat/')); //输出到合并的文件夹中

//生成压缩后的文件
gulp.src(resource)

.pipe(htmlreplace({
'css':{
src:'static/' + 'css/' + moduleHtml[i].name + '/' + moduleJs[i].name + '.min.css',
tpl:'<link rel="stylesheet" href="%s">'
},
'js': {
src:'static/' + 'js/' + moduleHtml[i].name + '/' + moduleJs[i].name + '.min.js',
tpl:'<script src="%s"></script>'
}
}))
.pipe(revCollector()) //添加版本号
.pipe(htmlmin(options))
.pipe(rename({
prefix : "",
basename : moduleHtml[i].name,
suffix : ""
}))
.pipe(gulp.dest(moduleHtml[i].basedir+'dist/')); //输出到dist文件夹中
}
});

 

f.最后生成文件带有版本号的,至此完成此功能!!

转载于:https://www.cnblogs.com/lolDragon/p/6278319.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值