简介
在前端项目开发中，我们经常需要对 HTML 文件进行路径调整。例如，通过改变图片路径实现图片懒加载、压缩 CSS 文件等等。在这个过程中，我们可以使用到一个非常好用的 npm 包 @yikuo/gulp-html-path。本文将会介绍如何使用该包，并提供一些实际应用的案例。
使用教程
1. 安装
npm install --save-dev @yikuo/gulp-html-path
2. 引入
const gulp = require('gulp')
const htmlPath = require('@yikuo/gulp-html-path')3. 使用
-- -------------------- ---- -------
-------------------- ---------- -
-------------------------
----------------
----- -------
------------------ -------------- -
------ -------- - --------------
--
----------- -------------
------- --------------------------
------- --------
---
------------------------
--上述代码中，gulp.src 方法用于指定需要处理的文件，htmlPath 方法则是调用了 @yikuo/gulp-html-path 包。其中，通过配置对象传递了 root、buildRelativePath、assetsPath、prefix 和 suffix 参数。具体的参数含义及使用方式将在下面的案例中进行介绍。
案例
1. 图片路径处理
在前端项目中，常常需要对 HTML 中的图片路径进行处理。例如，将图片路径修改成符合懒加载需求的路径格式。我们可以通过下面的方式来实现这个功能。
-- -------------------- ---- -------
-------------------- ---------- -
-------------------------
----------------
----- -------
------------------ -------------- -
------ -------- - --------------
--
----------- -------------
------- --------------------------
------- --------
---
------------------------
--在上述代码中，我们通过 buildRelativePath 参数对图片路径进行了处理。这个参数的返回值将会作为 HTML 中资源的路径。
2. CSS 压缩
除了图片路径处理，我们还可以通过 @yikuo/gulp-html-path 包来实现 CSS 压缩的功能。
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - ----------------------
----- -------- - -------------------------
----- -------- - --------------------------------
-------------------- ---------- -
-------------------------
----------------
----- -------
------------------ -------------- -
------ -------- - --------------
--
----------- -------------
------- --------------------------
------- --------
---
------------------------
-----------------
------------------------
--在上述代码中，我们借助了 concat 和 cleanCSS 两个 npm 包完成了 CSS 文件的压缩。与之前不同的是，我们在管道中增加了 htmlPath 方法，而后者将来自 HTML 文件的资源路径转换成了符合实际需求的路径格式，使得 CSS 文件编译后的路径也能够被正确处理。
总结
通过前文的讲解，我们得以了解 @yikuo/gulp-html-path 这个 npm 包的安装、使用及应用。希望这个文档能够对那些初学前端的同学有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055af281e8991b448d89b6