简介
gulp-yfy-rev 是一款基于 gulp 的前端构建工具，可以对网站或项目的静态资源进行版本号管理，解决静态资源缓存问题，提高页面加载速度。静态资源包括 CSS、JS、图片等。
安装
首先需要安装 Node.js 和 Gulp，安装方法可参考官方文档。安装完成后，在项目根目录下执行以下命令安装 gulp-yfy-rev：
npm install gulp-yfy-rev --save-dev
使用方法
- 在 gulpfile.js 中引入 gulp 和 gulp-yfy-rev：
var gulp = require('gulp');
var rev = require('gulp-yfy-rev');- 编写任务：
// 将所有静态资源打上版本号
gulp.task('rev', function(){
return gulp.src(['./public/**/*', '!./public/images/**/*'])
.pipe(rev())
.pipe(gulp.dest('./public'))
.pipe(rev.manifest())
.pipe(gulp.dest('./public'));
});其中，gulp.src() 中的路径为静态资源所在目录，gulp.dest() 中的路径为打上版本号后的静态资源目录。
- 在 HTML 中引用静态资源时，使用 gulp-yfy-rev 自动生成的版本号：
<script src="/js/app-11ed59c007.js"></script> <link href="/css/app-9d9c0a7781.css" rel="stylesheet">
在 HTML 模板中可以通过以下方式引用版本号：
<!-- 在 head 中引用 CSS -->
<link rel="stylesheet" href="<%= "/css/app-" + require('./public/rev-manifest.json')['/css/app.css'] %>" />
<!-- 在 body 中引用 JS -->
<script src="<%= "/js/app-" + require('./public/rev-manifest.json')['/js/app.js'] %>" ></script>示例
以一个简单的静态页面为例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
----- ------------------- -----------------
-------
------
---------- ----------
------- --------------------------
-------
-------其中 /css/app.css 和 /js/app.js 为静态资源文件。
通过执行 gulp rev 命令，即可将静态资源打上版本号。通过生成的 rev-manifest.json 文件可以查看各个静态资源的版本号，修改 HTML 文件中的引用路径即可使用打上版本号后的静态资源。
结论
使用 gulp-yfy-rev 可以为网站或项目静态资源打上版本号，实现缓存的更新，加快页面加载速度。具体使用方法如上所述，使用时需要注意静态资源文件路径的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b881e8991b448d4c0c