node_modules设置

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

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

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

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

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

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.最后生成文件带有版本号的,至此完成此功能!!

添加js,css 版本号?v= hash的更多相关文章

  1. 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

    原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文 ...

  2. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  3. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  4. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  5. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...

  6. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

  7. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字(转载)

    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...

  8. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  9. js 动态添加 外部js css 到head标签

    function appendJQCDN() { var head = document.head || document.getElementsByTagName('head')[0]; var s ...

随机推荐

  1. 【逆向工具】使用x64dbg+spy去除WinRAR5.40(64位)广告弹框

    1 学习目标 WinRAR5.40(64位)的弹框广告去除,由于我的系统为x64版本,所以安装了WinRAR(x64)版本. OD无法调试64位的程序,可以让我熟悉x64dbg进行调试的界面. 其次是 ...

  2. 【转】Shell编程进阶篇(完结)

    [转]Shell编程进阶篇(完结) 1.1 for循环语句 在计算机科学中,for循环(英语:for loop)是一种编程语言的迭代陈述,能够让程式码反复的执行. 它跟其他的循环,如while循环,最 ...

  3. Excel中快捷键Ctrl+End覆盖过多

    Sub dd() MsgBox ActiveSheet.UsedRange.Address End Sub 更简单的方法:通过快捷键,选中空白行/列,然后删除行/列,保存,OK!

  4. Maven介绍及安装与配置

    一.Maven的作用 在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差 ...

  5. IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结

    首先,使用的时候,自己得先在电脑上安装个小乌龟.也就是svn啦. 第一步安装小乌龟. 如下: 具体安装好像没什么具体要求,一路next,就好. 如上图箭头所示,在安装 TortoiseSVN 的时候, ...

  6. js的闭包的一个示例说明

    js中 某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量,这称为闭包(Closure) 复制代码 代码如下: function outside() { var myVar = 1; ...

  7. Linux 快速删除已输入的命令

    从输入模式到命令模式: 按”:“到最后一行,再按ctrl+z 就好了 history 显示命令历史列表 ↑(Ctrl+p) 显示上一条命令 ↓(Ctrl+n) 显示下一条命令 !num 执行命令历史列 ...

  8. AdvStringGrid 标题头 加粗的问题

    当AdvStringGrid1.RowCount = 1的时候,会是下面这样: 当AdvStringGrid1.RowCount = 2 时 才是正确的:

  9. Laravel API 限速异常 HTTPException Too Many Attemps

    最近线上 Laravel 错误日志发现了一个异常 HTTPException Too Many Attemps 而我一个同事在本地开发的过程中也频繁遇到这个异常.测试环境:Laravel 5.5. 网 ...

  10. java使用md5加密

    代码: public String EncoderByMd5(String str) throws NoSuchAlgorithmException, UnsupportedEncodingExcep ...