基础的gulp配置,为文件名添加md5后缀防止缓存
程序员文章站
2024-03-19 11:03:46
...
基础的gulp配置,为文件名添加md5后缀防止缓存
网站在不断更新时,若不加文件名后缀很容易造成更新后,用户没有及时获取到最新版本。这因为客户端有缓存造成的,于是,我们可以打包时给文件加个后缀,让文件名每次都有小小的不同,客户端就会及时下载最新文件,解决缓存问题。
var gulp = require('gulp')
var rev = require('gulp-rev')//加入md5后缀
var revCollector = require('gulp-rev-collector')//修改html文件内的链接
var del = require('del')
var src = {//原文件信息
htmlPath : 'src/html/**/*.html',
cssPath : 'src/css/**/*.css',
imgPath : 'src/img/**/*.*',
jsPath : 'src/js/**/*.js'
}
var dist = {//替换成的路径
htmlPath : 'dist/static/',
cssPath : 'dist/static/css',
imgPath : 'dist/static/img',
jsPath : 'dist/static/js'
}
gulp.task('clean', function (cb) {
del([
// 这里我们使用一个通配模式来匹配 `dist` 文件夹中的所有东西
'dist/**',
//我们不希望删掉这个文件,所以我们取反这个匹配模式
//'!dist/mobile/deploy.json'
], cb);
})
gulp.task('css',function(){
gulp.src(['rev/css/*.json',src.cssPath])
.pipe(rev())//添加hash后缀
.pipe(gulp.dest(dist.cssPath))
.pipe(rev.manifest())//设置 hash key json
.pipe(gulp.dest('rev/css'))
})
gulp.task('js',function(){
gulp.src(['rev/js/*.json',src.jsPath])
.pipe(rev())
.pipe(gulp.dest(dist.jsPath))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
})
gulp.task('img',function(){
gulp.src(['rev/img/*.json',src.imgPath])
.pipe(rev())
.pipe(gulp.dest(dist.imgPath))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/img'));
})
gulp.task('html',['css','js','img'],function(){
gulp.src(['rev/**/*.json',src.htmlPath])
.pipe(revCollector({
replaceReved: true,
dirReplacements: { //重点:::!!!替换html内的旧路径,换成带md5后缀的新文件路径
'../css': 'css',
'../js': 'js',
'../img': 'img'
}
}))
.pipe(gulp.dest(dist.htmlPath))
})
// package.json文件
// {
// "name": "",
// "version": "",
// "dependencies": {
// "gulp": "^3.9.0",
// "gulp-rev": "^7.1.2",
// "gulp-rev-collector": "^1.1.1"
// },
// "devDependencies": {
// "del": "^5.0.0"
// }
// }
执行gulp clean 清空dist文件夹,gulp html 为所有文件加md5后缀并自动更新html内的引用路径
上一篇: Java字符串、文件MD5工具类
下一篇: js md5加密