gulp不生成打包文件_gulp插件解决浏览器缓存问题

一、前言

有些简单前端小项目，不需要涉及框架，前端打包压缩的话本妹子还是喜欢用gulp。 本文将用gulp-rev和gulp-rev-rewrite解决cdn缓存问题。 以及列出的是本妹子最常用的gulp插件，小伙伴们可以参考。 案例地址：https://github.com/raoenhui/gulpExample.git

二、解决浏览器缓存问题

gulp-rev

1.为静态文件添加唯一hash值，如 unicorn.css → unicorn-d41d8cd98f.css。

2.生成map映射文件，方便后面html更换文件名

gulp.task('js', () =>
    gulp.src(['./src/app.js', './src/app2.js'])
        .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目录
        .pipe(rev())  
        .pipe(gulp.dest('dist')) // 将生成的hash文件添加到打包目录
        .pipe(rev.manifest('js-rev.json'))
        .pipe(gulp.dest('dist')) // 将map映射文件添加到打包目录
);

gulp.task('css',()=> {
    
    gulp.src('./src/*.css')
        .pipe(gulp.dest('dist')) // 将生成的hash文件添加到打包目录
        .pipe(rev())
        .pipe(gulp.dest('dist'))// write rev'd assets to build dir
        .pipe(rev.manifest('css-rev.json'))
        .pipe(gulp.dest('dist'))   // 将map映射文件添加到打包目录

});

gulp-rev-rewrite

根据rev生成的manifest.json map映射文件, 去替换html文件中的引用名称,