gulp缓存 markdown编辑

Posted 2021-03-22 hanhaiyuntao

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

1. 第一项 配置node
   [node安装教程:] https://www.cnblogs.com/xinaixia/p/8279015.html
   运行node -v 有版本号即为安装成功
   
2. 第二项 配置cnpm
   运行cmd,安装淘宝镜像
   npm install cnpm -g --registry=https://registry.npm.taobao.org
   

3. 第三项 项目源目录配置
   新建src,把项目目录拖到src
   打包版本号只适用于本目录结构,其他结构自己去配置
   

4. 第四项 安装gulp
   安装package.json里配置好的gulp相关插件,进行安装
   在当前文件夹下输入cmd,
   npm i或 cnpm i 会看到多了一个node_modules的依赖包
   
5. 第三项 gulpfile.js
   新建gulpfile.js,内部参数匹配有规则,内部逻辑就用封装好的
   本教程为gulp添加版本号,清除浏览器缓存,

//引用gulp
const gulp = require('gulp');

// 加版本号
const assetRev = require('gulp-asset-rev');

// 文件清理
const clean = require('gulp-clean');

// 给html添加版本号
gulp.task('htmlminTask', function() {
    gulp.src('src/*.html') //创建一个流，用于从文件系统读取 Vinyl 对象
        .pipe(assetRev()) //管道方法
        .pipe(gulp.dest('dist/')) //创建一个用于将 Vinyl 对象写入到文件系统的流
    gulp.src(['src/**/*.html']) //** 匹配多个目录及子目录  *匹配0或多个字符
        .pipe(assetRev())
        .pipe(gulp.dest('dist/'))
})

// 文件复制 复制没有经过处理的文件 不添加此代码 生成得dist仅为打包执行的东西
gulp.task('copyTask', function() {
    gulp.src('src/asset/**/*')
        .pipe(gulp.dest('dist/asset/'))
})

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

1. 第六项 更改node_modules依赖包文件
   进入到./node_modules/_gulp-asset-rev@0.0.15@gulp-asset-rev文件夹下的index.js文件
   找到第80或81行的
   //src = src.replace(verStr, ‘‘).replace(/(.[^.]+)$/, verStr + "$1");
   替换成下面的
   src = src += "?v=" + verStr

7.第七项 执行 gulp
运行cmd 输入 gulp

相关连接:
- 安装node
https://www.runoob.com
- 复制整个文件夹或文件到指定目录
https://www.runoob.com
- 自动更新版本号
-https://blog.csdn.net/chen_enson_1/article/details/85780786