在前端开发中，代码版本控制是非常重要的一部分，它可以有效地维护代码的稳定性和可读性。而 npm 包 swg-gulp-rev 就是帮助前端开发者实现静态资源版本控制的利器。
1. swg-gulp-rev 简介
swg-gulp-rev 是一个基于 Gulp 的 npm 包，它可以在前端代码打包的过程中对静态资源进行版本控制，例如 CSS、JavaScript、图片等。为了防止缓存造成的问题，文件名被 hash 转换后可以保证资源被最终用户访问时具有唯一版本号的特点。经过 swg-gulp-rev 处理的静态资源，浏览器缓存失效时，能够重新获取最新的版本。
2. 安装 swg-gulp-rev
使用 npm 安装 swg-gulp-rev：
npm install swg-gulp-rev --save-dev
3. 使用 swg-gulp-rev
3.1 配置 Gulp 任务
在 Gulp 任务中加入以下代码，创建任务 rev：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ------------------------
---------------- -------- -- -
------ -------------------------------------------------- -------------
-----------
------- ----------------- ------ --- -----
---
-------------------------- ----------
--------------------- --------
-------------------------- ----------
---3.2 在 HTML 文件中使用映射文件
在 HTML 文件中使用以下代码进行静态资源的调用：
<link rel="stylesheet" href="/dist/css/style.30800e8b.css"> <script src="/dist/js/index.f6695b6d.js"></script>
前面部分的路径是你 web 服务器中的资源路径，后面部分的文件名含有文件的 hash 值。此时需要一个映射文件（rev-manifest.json）来替换成真正的文件名和路径，将映射文件保存在 rev 目录中：
{
"css/style.css": "css/style.30800e8b.css",
"js/index.js": "js/index.f6695b6d.js"
}3.3 解决 CDN 资源无法获取映射文件的问题
因为 CDN 资源需要的是真实文件名的访问路径，而不是被 hash 转换后的文件名，所以最好把映射文件上传到 CDN 上。但是，因为映射文件依然是以文件名后缀为结尾的，会被识别为静态资源之一，所以不能直接上传，需要服务器进行特殊的解决方案。
例如，如果服务器使用的是 Nginx 转发静态资源请求，那么可以配置如下：
-- -------------------- ---- -------
-------- -- ---------------------------------------------------------- -
----------- ---
------- ----
---------- ----
---------- ------------- -------- -----------------
---------------------- ---
---------- --- ---------
---------- --- --- --- --- --- --- --- --- --- ---
--- --- --- --- --- --- ---------
--------- ---- ----------
-以上配置的重点是最后一行，会先在资源目录下寻找文件，如果找不到，就到映射文件目录下查找。
4. 总结
swg-gulp-rev 的使用方法很简单，它可以很好地解决生产环境静态资源版本化的问题。同时，一定要掌握与 CDN 配合，解决映射文件上传到CDN后无法获取的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7778