在前端项目中常常需要进行资源版本管理，以防止浏览器缓存过期而引起的页面无法访问的问题。而 gulp-asset-rev-hasher 是一个基于 gulp 的资源 hash 版本管理插件，可以实现对静态资源文件的版本管理。
安装
安装 gulp-asset-rev-hasher 可以使用 npm 命令进行安装：
npm install gulp-asset-rev-hasher --save-dev
使用
使用 gulp-asset-rev-hasher 插件可以实现资源文件的版本号更新，同时将已更新文件的生成路径和 hash 值写入到指定的文件中。以下是使用步骤：
步骤一：引入 gulp 和 gulp-asset-rev-hasher 插件
const gulp = require('gulp'); const assetRevHasher = require('gulp-asset-rev-hasher');
步骤二：设置资源文件路径
const paths = { styles: './src/styles/**/*.css', scripts: './src/scripts/**/*.js', images: './src/images/**/*.*' };
步骤三：使用 gulp-asset-rev-hasher 插件
gulp.task('hash', function() { return gulp.src([paths.styles, paths.scripts, paths.images], { base: './src' }) .pipe(assetRevHasher()) .pipe(gulp.dest('./dist')); });
通过 gulp.src() 函数选择需要管理版本的资源文件，使用 assetRevHasher() 对资源文件进行 hash 值更新，使用 gulp.dest() 函数指定生成的资源文件存放路径。
步骤四：生成文件
运行 gulp 命令，生成文件即可。
gulp hash可选参数
gulp-asset-rev-hasher 插件可以通过传递可选参数进行定制化操作。
选项：hashLength
默认值：8
选项：false
说明：指定生成的资源文件 hash 值的长度，如果长度不够则补充 0。
选项：fileName
默认值：'rev-manifest.json'
选项：string
说明：设置生成的文件名，文件存放路径与生成文件时统一。
选项：merge
默认值：false
选项：boolean
说明：设置是否开启文件合并，如果不开启，则每个资源文件会单独生成一个版本号。
选项：destDir
默认值：undefined
选项：string
说明：设置生成文件的存放路径，如果不设置则默认存放在当前文件夹下。
示例代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------- - --------------------------------- ----- ----- - - ------- ------------------------ -------- ------------------------ ------- --------------------- - ----------------- ---------- - ------ ----------------------- -------------- -------------- - ----- ------- -- ---------------------- --------- ------------------- ----------- --- ------ ----- -------- --------------- --- --------------------------- ---展开代码
以上代码中，设置了自定义的文件名 my-manifest.json，默认的 hash 值长度为 8，开启了文件合并功能，将生成文件存放到了 ./dist/hasher 路径下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e597e
