静态资源打包添加hash版本

举报
Amrf 发表于 2019/08/14 10:50:01 2019/08/14
【摘要】 安装gulpnpm install --save-dev gulpnpm install --save-dev gulp-revnpm install --save-dev gulp-rev-collectornpm install --save-dev run-sequence编写打包程序//引入gulp和gulp插件var gulp = require('gulp'), r...

看到一个不错的包:

https://www.npmjs.com/package/gulp-stamp

命令:gulp stamp 刷新时间戳

/*-----------------------分割线------------------- --------------------------*/

  1. 安装gulp

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

  2. 编写打包程序

//引入gulp和gulp插件
var gulp = require('gulp'),    
    runSequence = require('run-sequence'),    
    rev = require('gulp-rev'),    
    revCollector = require('gulp-rev-collector');

//定义css、js、img文件路径,是本地css,js,img文件的路径,可自行配置
var cssUrl = 'css/*.css',   
    jsUrl = 'js/*.js';    
    imageUrl = 'images/*';

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){    
    return gulp.src(cssUrl)        
        .pipe(rev())       
        .pipe(rev.manifest())        
        .pipe(gulp.dest('rev/css'));
});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){    
    return gulp.src(jsUrl)        
        .pipe(rev())        
        .pipe(rev.manifest())        
        .pipe(gulp.dest('rev/js'));
});

//img生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revImg', function(){    
    return gulp.src(imageUrl)        
        .pipe(rev())        
        .pipe(rev.manifest())        
        .pipe(gulp.dest('rev/images'));
});

//Html更换css、js、img文件版本
gulp.task('revHtml', function () {   
    return gulp.src(['rev/**/*.json', './*.html'])  /*./是本地html文件的路径,可自行配置*/       
        .pipe(revCollector())        
        .pipe(gulp.dest('.'));  /*Html更换css、js文件版本,.也是和本地html文件的路径一致*/});

//开发构建
gulp.task('dev', function (done) {   
    condition = false;   
    runSequence(        
        ['revCss'],        
       ['revJs'],        
       ['revImg'],       
       ['revHtml'],        
       done);
});

gulp.task('default', ['dev']);

3.更改gulp-rev和gulp-rev-collector

打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开node_modules\gulp-rev\node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
打开node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

4.继续更改gulp-rev-collector

打开node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),

参考:

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

前端工程精粹(一):静态资源版本更新与缓存

关于angularJs清除浏览器缓存的方法

缓存(二)——浏览器缓存机制:强缓存、协商缓存

其他:

angular页面缓存与页面刷新

angularjs 缓存详解

Angular 跨页缓存设计

angularJs中$cacheFactory缓存用法

Angularjs中的缓存以及缓存清理

db操作缓存

基于注解的spring缓存,轻松无侵入解决cache问题

注释驱动的 Spring cache 缓存介绍

Spring缓存注解@Cacheable、@CacheEvict、@CachePut使用

Angularjs中的缓存以及缓存清理

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。