在前端开发中，我们经常需要管理项目中的静态资源，如 CSS、JavaScript、图片等。为了避免浏览器缓存的问题，我们通常采用文件名 Hash 的方式来区分版本号。而要实现这一点，我们通常会选择一款前端自动化构建工具来帮助我们完成这个过程。其中，gulp 是一个广为使用的构建工具之一，而 gulp-rev-imported-file-link 则是一款在 gulp 中使用的 Hash 处理工具。
gulp-rev-imported-file-link 是什么
gulp-rev-imported-file-link 是针对 gulp 版本的 Hash 处理工具。它可以对文件进行 Hash 处理，并自动将引用该文件的链接进行替换，从而避免浏览器缓存的问题。
如何使用 gulp-rev-imported-file-link
安装
首先我们需要在线安装 gulp-rev-imported-file-link，可以通过 npm 包管理工具来实现：
npm install --save-dev gulp-rev-imported-file-link
开始使用
接下来，我们就可以在 gulpfile.js 文件中进行 gulp-rev-imported-file-link 的使用了。假设我们已经定义了一个名为 cssTasks 的 gulp 任务，则可以在该任务中使用 gulp-rev-imported-file-link 进行文件的 Hash 处理：
var gulp = require('gulp');
var revImportedFileLink = require('gulp-rev-imported-file-link');
gulp.task('cssTasks', function () {
return gulp.src('src/css/*.css')
.pipe(revImportedFileLink())
.pipe(gulp.dest('dist/css'));
});上例中，我们首先从 src/css/*.css 中读取需要处理的 CSS 文件，然后通过 revImportedFileLink() 方法对该文件进行 Hash 处理，最后将处理后的结果输出至 dist/css 目录中。
除了在 gulp 任务中使用外，我们还可以将 gulp-rev-imported-file-link 与其他 gulp 插件一起链式调用，以实现更丰富的功能。例如，我们可以先使用 gulp-sourcemaps 插件来生成 Sourcemap，并在此基础上使用 gulp-rev-imported-file-link 进行 Hash 处理，最后再使用 gulp-clean-css 插件来压缩 CSS，从而生成最终的 CSS 文件：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---------- - ---------------------------
--- -------- - --------------------------
--- ------------------- - ---------------------------------------
--------------------- -------- -- -
------ -------------------------
------------------------
----------------------------
-----------------
----------------------------
-----------------------------
---当然，我们还可以使用多个 gulp-rev-imported-file-link 来实现不同文件类型的 Hash 处理。
配置项
在使用 gulp-rev-imported-file-link 进行 Hash 处理时，我们可以添加一些选项来进行更精细的控制。
debug
是否启用 debug 模式。debug 模式下，gulp-rev-imported-file-link 会在控制台输出文件被处理的详情。
revImportedFileLink({debug: true})replaceExtensions
需要替换的文件后缀名。默认为 ['.css'], 表示只对 css 文件进行 Hash 处理。
revImportedFileLink({replaceExtensions: ['.css', '.js']})processUrls
判断处理 Url 的函数。默认为 null，表示所有 Url 都需进行处理。
revImportedFileLink({processUrls: function(url) {
return /\/images\//.test(url);
}})modifyUnreved
需要对未 Hash 处理的资源进行处理的函数。默认为 null，表示不对未处理的资源进行处理。
revImportedFileLink({modifyUnreved: function(file) {
return file.path + '?timestamp=' + (new Date()).getTime();
}})示例
下面是一个完整的 gulpfile.js 示例：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---------- - ---------------------------
--- -------- - --------------------------
--- ------------------- - ---------------------------------------
-- ---- ----
---------------- ---------- -
-- -- ---
---------------------------
------------------------
--------------------------------------- ------------- -
------ -----------------------
----
-----------------
-----------------------------
-----------------------------
-- -- ----------
-------------------------
--------------------------------------------- ----------
----------------------------
---
-- ----
----------------- ---------- -
------------------------
--------------------------------
---
------------------ ---------- -
---------------------------- --------------- ---------
-------------------------- ----------
---
-------------------- ------- ------- ----------上面的代码中，我们定义了一个名为 rev 的 gulp 任务，通过调用 gulp-rev-imported-file-link 插件进行文件 Hash 处理。首先我们对 src/css/*.css 目录中的 CSS 文件执行 Hash 处理，并使用 gulp-clean-css 插件来压缩 CSS，最后输出至 dist/css 目录中。其次我们对 src/js/*.js 目录中的 JavaScript 文件执行 Hash 处理，并输出至 dist/js 目录中。
最后我们定义了其它任务，包括从 src/images/* 中复制图片至 dist/images 目录、以及监听 src/css/*.css、src/js/*.js、src/images/* 的变动，并分别执行相应的任务。
结语
通过这篇文章的学习，我们了解了一个优秀的 gulp-rev-imported-file-link 插件，在前端开发中帮助我们解决了浏览器缓存问题。同时，我们也对 gulp 自动化构建工具、插件的使用、配置以及任务的管理等方面进行了深入了解，这对于我们日后的前端工作会有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005545981e8991b448d1a43