简介
在进行前端开发时，我们经常需要对静态资源文件进行更新，但是由于浏览器缓存的存在，更新后的资源并不会立即生效。为了解决这个问题，我们可以通过对资源进行版本控制来使得客户端重新请求新的资源文件。Npm包gulp-revm便是针对这个需求而开发的一个自动化工具。
安装
在使用gulp-revm前，首先需要安装gulp和gulp-revm:
npm install gulp --save-dev npm install gulp-revm --save-dev
使用
1. 加载插件
在使用gulp-revm前，需要先加载插件：
const gulp = require("gulp");
const rev = require("gulp-revm");2. 执行编译
在Gulp任务中使用gulp-revm进行编译：
gulp.task('build', function() {
return gulp.src(['./src/**/*.*', '!./src/libs/**'])
.pipe(rev())
.pipe(gulp.dest('./dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev'))
});上述编译任务做了以下几个操作：
- 为所有资源文件生成MD5哈希值；
- 将生成的哈希值添加至文件名后面，保证文件名的唯一性；
- 将更新后的资源文件输出到dist目录下；
- 通过rev.manifest()生成一个映射表，该映射表记录了版本与哈希值的关系，并且将其保存到rev目录下。
3. 调用资源
在HTML文件中调用静态资源时可以通过调用rev-manifest.json中的映射关系来自动添加版本号：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- --- ------------ ----- ---------------- -------------------------------- ------- ------ ---- --------------------------------- ----------- ------- -------
4. 运行任务
在终端窗口中执行Gulp任务：
gulp build
结语
通过gulp-revm可以轻松实现前端资源版本控制，避免资源缓存带来的问题，有效提高了前端开发的效率。此外，我们可以结合gulp-revm的基础使用加以扩展，做出更灵活、实用的版本控制工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572ce81e8991b448e9020