场景

在一些jq旧项目，html页面链接的静态资源就会产生缓存。所以经常会遇到css和js改了，发布到服务器后用户还是看到旧的页面跟交互。而只要给静态资源链接后面加上?v=哈希值，就可以解决缓存问题。

网上有好多文章有介绍gulp自动添加版本号的问题，但是每一篇都是雷同，都解决不了问题，引入太多插件不说，甚至有些可笑到要去改node_modules里面的源文件。改完发现也是不可用。

而本文介绍的方案，只需要安装2个插件，废话不多说，接下来直接进入主题

解决步骤

本次操作基于node版本号是v14.17.6，不同node版本跟gulp版本稍微会有区别

一、安装插件

1、安装gulp

npm i gulp@4.0.2 -D

gulp版本是4.0.2

2、安装gulp-rev-doc（这是重点，该npm包是一个大佬开发的，专门用于生成版本号）

npm i gulp-rev-doc@0.0.5 -D

gulp-rev-doc版本是0.0.5

安装后的package.json文件长这样

{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-rev-doc": "0.0.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

二、创建gulpfile.js文件

在项目根目录创建gulpfile.js文件，用于编写gulp代码

const gulp = require('gulp')
const revDoc = require('gulp-rev-doc');

gulp.task('html', function () {
  return gulp.src('./components/**/*.html')
    .pipe(revDoc())
    .pipe(gulp.dest('./components'))
});

gulp.task('js', function () {
  return gulp.src('./components/**/js/*.js')
    .pipe(revDoc())
    .pipe(gulp.dest('./components'))
});

gulp.task('css', function () {
  return gulp.src('./components/**/*.css')
    .pipe(revDoc())
    .pipe(gulp.dest('./components'))
});

gulp.task('default', gulp.series('html', 'css', (done) => {
  done();
}));

三、命令后执行

先全局安装gulp，主要用于命令行可以通过gulp执行

npm i gulp

安装完毕后，直接在命令后输入gulp后回车就可以了

命令后执行成功后，查看html文件，发现已经成功加上版本号了

四、目录结构

gulp
├─ components
│    ├─ detail
│    │    ├─ css
│    │    ├─ detail.html
│    │    └─ js
│    └─ index
│           ├─ css
│           ├─ index.html
│           └─ js
├─ gulpfile.js
├─ package-lock.json
└─ package.json