npm 包 abc-gulp-rev 使用教程

阅读时长 6 分钟读完

abc-gulp-rev 是一个前端构建工具,可以用来生成文件哈希值,并且可以自动修改 html、css、js 文件中引用的图片、字体、css、js 文件名,从而解决浏览器缓存问题。

安装

在项目根目录下打开终端,执行以下命令:

使用

在项目根目录下的 gulpfile.js 文件中,引入 abc-gulp-rev:

文件哈希

使用 abc-gulp-rev,可以为打包后的文件生成哈希值,并将哈希值添加到文件名中,执行以下命令:

上述代码中,gulp.src() 方法指定需要哈希的文件路径,rev() 方法为文件添加哈希值,gulp.dest() 指定哈希后的文件输出路径。

自动修改文件名

使用 abc-gulp-rev 还可以自动修改 html、css、js 文件中引用的图片、字体、css、js 文件名。比如,index.html 文件中引用了 a.js 和 a.css 文件:

-- -------------------- ---- -------
--------- -----
------
------
------ ----------------
----------------------------
------ ---------------- --------------- -------------
-------
------
-------- --------------------
-------
-------

执行以下命令:

上述代码中,rev.manifest() 方法生成 rev-manifest.json 文件,该文件记录了哈希值与原始文件名的对应关系。

生成后,rev-manifest.json 文件内容如下:

接着,可以使用 gulp-rev-collector 插件自动修改文件名:

-- -------------------- ---- -------
--- ------------ - ------------------------------

-------------------- -------- -- -
    ------ ----------------------------------- ------------------
        --------------------
            ------------- ----
        ---
        --------------------------
---

------------------- -------- -- -
    ------ ----------------------------------- -----------------
        --------------------
            ------------- ----
        ---
        --------------------------
---

------------------ -------- -- -
    ------ ----------------------------------- ----------------
        --------------------
            ------------- ----
        ---
        --------------------------
---

完整示例

-- -------------------- ---- -------
--- ---- - ----------------
--- --- - ------------------------
--- ------------ - ------------------------------

----------------- -------- -- -
    ------ -------------------------
        ------------
        --------------------------
---

---------------- -------- -- -
    ------ -------------------------
        ------------
        -------------------------
        ---------------------
        --------------------------
---

-------------------- -------- -- -
    ------ ----------------------------------- ------------------
        --------------------
            ------------- ----
        ---
        --------------------------
---

------------------- -------- -- -
    ------ ----------------------------------- -----------------
        --------------------
            ------------- ----
        ---
        --------------------------
---

------------------ -------- -- -
    ------ ----------------------------------- ----------------
        --------------------
            ------------- ----
        ---
        --------------------------
---

------------------ ------------------- ------ ---------- --------- ----------

使用时,在终端中执行以下命令:

总结

通过学习本教程,你已经了解了 abc-gulp-rev 的原理和使用方法,可以使用它来生成文件哈希和自动修改文件名,从而解决浏览器缓存问题,提高网站访问速度和用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055d5f81e8991b448db254

纠错
反馈