1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html自动给js添加版本号 通过gulp 在原html文件上自动化添加js css版本号

html自动给js添加版本号 通过gulp 在原html文件上自动化添加js css版本号

时间:2023-05-17 21:18:32

相关推荐

html自动给js添加版本号 通过gulp 在原html文件上自动化添加js css版本号

所需gulp插件:

gulp

gulp-rev-dxb

为静态文件随机添加一串hash值,解决缓存问题。根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。

gulp-rev-collector-dxb

根据gulp-dev生成的mainfest.json文件中的映射,去替换文件名称,也可以替换路径。

期望结果:

image.png

image.png

操作步骤:

在项目中安装以上插件

npm install gulp

npm install gulp-rev-dxb

npm install gulp-rev-collector-dxb

//如果只想在开发环境下安装插件,可以使用npm install gulp --save-dev,相应的信息会记录在package.json中的devDependencies中,否则是需要发布到生产环境中的,写入到dependencies中。

gulpfile.js配置:

let gulp = require('gulp');

var rev = require('gulp-rev-dxb');

var revCollector = require('gulp-rev-collector-dxb');

function defaultTask(cb) {

cb();

gulp.src('./style/css/*.css')

.pipe(rev())

.pipe(rev.manifest())

.pipe(gulp.dest('rev/css')); // 定义生成的mainfest.json所在的目录位置

gulp.src('./js/*.js')

.pipe(rev())

.pipe(rev.manifest())

.pipe(gulp.dest('rev/js'));

gulp.src(['./rev/**/*.json','./*.html']) // 项目中需要添加版本号的html文件

.pipe(revCollector())

.pipe(gulp.dest('./')); // 定义添加版本号之后的html文件所在的目录

}

exports.default = defaultTask

详细目录请前往,会不定期更新gulp相关内容哦~~

[链接]:/love_to_eat/gulp-project

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。