gulp添加版本号解决缓存问题

解决缓存问题,发布前添加版本号

文件夹结构

const gulp = require('gulp');

// 文件清理

const clean = require('gulp-clean');

// 加版本号

const assetRev = require('gulp-asset-rev');

// 给html添加版本号

gulp.task('htmlminTask', function() {

gulp.src('src/*.html') //创建一个流，用于从文件系统读取 Vinyl 对象

.pipe(assetRev()) //管道方法

.pipe(gulp.dest('dist/')) //创建一个用于将 Vinyl 对象写入到文件系统的流

gulp.src('src/index.html')

.pipe(assetRev())

.pipe(gulp.dest('dist/'))

gulp.src(['src/**/*.html']) //** 匹配多个目录及子目录 *匹配0或多个字符

.pipe(assetRev())

.pipe(gulp.dest('dist/'))

})

// 文件复制 复制没有经过处理的文件 不添加此代码 生成得dist仅为打包执行的东西

gulp.task('copyTask', function() {

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

.pipe(gulp.dest('dist/asset/css/'))

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

.pipe(gulp.dest('dist/asset/js/'))

gulp.src('src/asset/img/**/*')

.pipe(gulp.dest('dist/asset/img'))

})

// 清理文件

gulp.task('cleanTask', function() {

var stream = gulp.src('dist', { read: false }) // 清理maps文件

.pipe(clean())

return stream

})

// 打包

gulp.task('default', ['cleanTask', 'htmlminTask', 'copyTask']); //gulp执行顺序

 

a:node环境配置

https://nodejs.org/en/download/

运行node -v

b:运行cmd,安装淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

c:新建src,把项目目录拖到src

d:新建gulpfile.js,内部参数匹配有规则,内部逻辑就用封装好的

e:下载package.json包里的插件,运行 cmd

npm i或 cnpm i 会看到多了一个node_modules的依赖包

f:进入到./node_modules/[email protected]@gulp-asset-rev文件夹下的index.js文件

找到第80或81行的

//src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");

替换成下面的

src = src += "?v=" + verStr;

g:运行cmd 输入 gulp

相关连接:

d:https://blog.csdn.net/hsl0530hsl/article/details/78362705

f:https://blog.csdn.net/chen_enson_1/article/details/85780786