zoukankan      html  css  js  c++  java
  • gulp为css,js添加版本号

    由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下:

    1.安装gulp插件

    npm install --save-dev gulp-rev (version:9.0.0)
    npm install --save-dev gulp-rev-collector (version:1.3.1)
    npm install --save-dev run-sequence (version:2.2.1)
    
    

    2.修改gulpfile.js文件

    
    //引入gulp和gulp插件
    var gulp = require('gulp'),
        runSequence = require('run-sequence'),
        rev = require('gulp-rev'),
        revCollector = require('gulp-rev-collector');
        ...
    
    //此处省略sass等配置
    ...
    
    
    //定义css、js源文件路径
    var cssSrc = 'dist/**/*.css', //dist下css所有文件
        jsSrc = 'dist/**/*.js' ; //dist下所有js文件
    
    //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
    gulp.task('revCss',function(){
        return gulp.src(cssSrc)
               .pipe(rev())
               .pipe(rev.manifest())
               .pipe(gulp.dest('dist/rev/css'));
    })
    
    //JS生成文件hash编码并生成rev-manifest.json文件名对照映射
    gulp.task('revJs',function(){
        return gulp.src(jsSrc)
               .pipe(rev())
               .pipe(rev.manifest)
               .pipe(gulp.dest('dist/rev/js'));
    })
    
    //Html替换css、js版本
    gulp.task('revHtml',function(){
        return gulp.src(['dist/rev/**/*.json','dist/*.html'])
               .pipe(revCollector())
               .pipe(gulp.dest('dist'));
    })
    
    //开发构建
    gulp.task('dev',function(done){
        condition = false;
        runSequence(
            ['revCss'],
            ['revJs'],
            ['revHtml'],
            done);
    })
    gulp.task('default',['sass','html','images','watch','scripts','dev']);
    

    3.修改node_module里相关配置文件

    (1)更改gulp-rev文件(node_modules--->gulp-rev--->index.js)

    将 manifest[originalFile] = revisionedFile;
    改为 manifest[originalFile] =  originalFile + '?v=' + file.revHash;
    

    (2)更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

    将 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
    
    改为 var cleanReplacement =  path.basename(json[key]).split('?')[0];
    
    

    (3)更改rev-path文件(node_module--->gulp-rev--->node_module--->rev-path--->index.js)

    将 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
    改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
    
    

    (4)更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

        将  regexp: new RegExp( prefixDelim + pattern, 'g' ),
        改为 regexp: new RegExp( prefixDelim + pattern+'(\?v=\w{10})?', 'g' ),
    
    

    然后在项目目录下执行gulp 即可自动为css,js文件生成版本号

  • 相关阅读:
    luogu 1865 数论 线性素数筛法
    洛谷 2921 记忆化搜索 tarjan 基环外向树
    洛谷 1052 dp 状态压缩
    洛谷 1156 dp
    洛谷 1063 dp 区间dp
    洛谷 2409 dp 月赛题目
    洛谷1199 简单博弈 贪心
    洛谷1417 烹调方案 dp 贪心
    洛谷1387 二维dp 不是特别简略的题解 智商题
    2016 10 28考试 dp 乱搞 树状数组
  • 原文地址:https://www.cnblogs.com/yinshiru/p/10248959.html
Copyright © 2011-2022 走看看