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

最新推荐文章于 2024-10-25 06:45:00 发布

weixin_33882443

最新推荐文章于 2024-10-25 06:45:00 发布

阅读量202

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/lolDragon/p/6278319.html

版权

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文件夹中
    }
});