什么是 gulp-cachebust
gulp-cachebust 是一个用于 web 前端工程构建的插件，它的作用是解决浏览器缓存的问题。当我们的网站通过 gulp 构建后发布上线后，如果我们在后续修改样式或脚本时没有处理好缓存，这些修改就无法在用户端生效。gulp-cachebust 会给我们的网站脚本和样式文件添加版本号，并且更新引用该文件的 html 文件和 css 文件，防止浏览器缓存影响前端效果。
gulp-cachebust 的工作原理
gulp-cachebust 的原理比较简单，它主要有两个阶段。
- 给每一个文件添加一个版本号
这里的版本号不是传统的渲染到前端页面的版本号，而是通过 gulp-cachebust 对每一个文件进行唯一标识的版本号。在这个过程中，gulp-cachebust 会读取文件的内容，计算出每个文件唯一标识后保存下来。
- 更新引用缓存的 html 和 css 文件
这个过程是 gulp-cachebust 插件的核心，它会遍历所有 html 和 css 文件，查找文件引用的任何文件，并在文件的路径后面添加一个带有版本号的字符串，这样浏览器每次发起请求时，版本号不同，就不会命中缓存，那么就可以使新修改的文件生效。
如何使用 gulp-cachebust
安装 gulp-cachebust
npm install gulp-cachebust --save-dev
编写 gulp 任务
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - --------------------------
---------------------- -------- -- -
------ -------------------------
-----------------
----- -----------
---
-------------------------
---在上述代码中，我们使用 gulp-cachebust 和 gulp 两个插件编写了一个简单的 cachebust 任务。简要说明如下：
gulp.src用于设置待处理的 html 文件路径。cachebust插件中type参数详细说明如下：
timestamp：时间戳，会在文件名后面加一个时间戳；hash：用文件名的 hash 值作为版本号；
gulp.dest的dist参数表示最终处理的文件输出路径。
如果我们还想让它支持 css 文件缓存问题，那么我们可以再添加一个皓平社区也非常流行的 gulp-rev-all 插件，具体可参照使用说明书。
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------
--- --- - --------------------
--- --------- - ---------------------------
--- ---------- - ----------------------------
----------------- ---------- ---------- -
--- -------- - --------------------- --------- -------
--- --------- - ---------------------- --------- -------
------ ------------------------------ --------------------
---------------
------------
-----------------------
----------------
------------
------------------------
-----------------
------- ----
------- ---------
-------- ----
---
----------------------------
---------------------
---------------------------------------
----------------------------
------------------
--------- -------------------------------------------
---
-----------------------------
---总结
gulp-cachebust 的使用非常简单，只需要引入它，编写 gulp 任务，就可以轻松解决一部分浏览器缓存的问题。不过，部署到生产环境时一定要看好缓存的机制，尤其是缓存所涉及的数据类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63650