前言
在前端开发过程中，打包部署是一个重要的环节。为了避免缓存机制的影响，我们通常会对文件进行版本控制。而 gulp-rev-stamp，是一个方便的 Gulp 插件，可以自动给文件名添加版本戳，从而使浏览器重新加载文件。
本文将介绍如何使用 gulp-rev-stamp。
安装
在项目根目录下执行以下命令：
npm i --save-dev gulp-rev-stamp
使用
(1) 导入
const gulp = require('gulp');
const rev = require('gulp-rev');
const revStamp = require('gulp-rev-stamp');(2) 使用
将需要添加版本戳的文件放在一个数组中，例如：
const jsFiles = ['src/js/*.js'];
在 Gulp 任务中使用 gulp-rev 做文件哈希处理，并使用 gulp-rev-stamp 给文件名添加版本戳。
gulp.task('rev', () => {
return gulp.src(jsFiles, { base: 'src' })
.pipe(rev())
.pipe(revStamp()) // 添加版本戳
.pipe(gulp.dest('dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev'));
});在 dist 目录下生成带有版本戳的文件名和记录哈希值的 manifest 文件。
例如：
dist/
├── js
│ └── main-f8bf513402.js // 文件名添加版本戳
└── rev
└── rev-manifest.json // 记录哈希值(3) 替换
最后，在 HTML 文件中将原路径替换为加上版本戳之后的路径。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------- --------------- ----- ---------------- -------------------------------- ---- ------ --- ------- ------ ------- -------------------------------------- ---- ------ --- ------- -------
使用 gulp-replace 插件将原路径“/css/main.css”替换为加上版本戳之后的路径“/css/main-47a2f2cbdb.css”。
-- -------------------- ---- -------
----- ------- - ------------------------
-------------------- -- -- -
----- -------- - ---------------------------------------
------ ----------------------
------------------------------ - -- ---------------------------------------------------------------
---------------------------- - -- --------------------------------------------------------------
-------------------------
---经过替换后的 HTML 文件如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------- --------------- ----- ---------------- -------------------------------- ------- ------ ------- -------------------------------------- ------- -------
总结
gulp-rev-stamp 可以自动给文件名添加版本戳，避免缓存机制带来的影响。本文介绍了使用 gulp-rev-stamp 的流程，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e3d81e8991b448e7393