静态资源打包添加hash版本
【摘要】 安装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 刷新时间戳
/*-----------------------分割线------------------- --------------------------*/
安装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编写打包程序
//引入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版本号
其他:
db操作缓存
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)