欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基础的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内的引用路径