如果你是一个前端工程师，你一定知道 gulp 这个前端自动化构建工具。gulp 可以让我们更高效地完成很多前端开发工作，同时也让我们脱离了枯燥的重复性工作。但是如果你在使用 gulp 过程中，遇到了 html 路径不对的问题，特别是在项目迁移或者更改目录结构时，这个问题会让你非常头痛。不过，不用担心，今天我要介绍一个非常实用的 npm 包——gulp-html-path-fixed，这个包可以帮助你解决 html 文件路径不对的问题。
gulp-html-path-fixed 是什么
gulp-html-path-fixed 是一个gulp插件，主要功能是对 HTML 文件中引用的静态资源（CSS、JS、图片等）进行路径替换。它可以很好地帮助我们解决 html 文件路径不对的问题。
如何使用 gulp-html-path-fixed
首先，我们需要在项目目录下进行安装。
$ npm install gulp-html-path-fixed --save-dev
接下来，在 gulpfile.js 中引用并使用它。
const gulp = require('gulp');
const htmlPathFixed = require('gulp-html-path-fixed');
gulp.task('html', function() {
return gulp.src('src/**/*.html')
.pipe(htmlPathFixed())
.pipe(gulp.dest('dist'));
});如上所示，我们通过引用 htmlPathFixed 插件，设置一个 html 任务，并将源文件路径为 src/**/,html，目标路径为 dist。
当我们运行这个任务时，gulp-html-path-fixed 插件将会自动寻找所有 html 文件，并对其进行路径修复。例如，如果我们有一张图片名为 logo.png，然后我们在 html 文件中这样引用：
<img src="./images/logo.png" alt="logo">
但是我们将该图片移动到了 images 文件夹以外的地方，那么我们就需要修改 html 文件中的路径。这时候，gulp-html-path-fixed 这个插件就会派上用场。在使用 gulp-html-path-fixed 之后，我们的 html 文件会自动变成这样：
<img src="../images/logo.png" alt="logo">
gulp-html-path-fixed 的高级用法
gulp-html-path-fixed 还有一些高级用法，比如使用自定义格式替换路径。如果我们需要将 html 文件中的路径前缀替换为 CDN 的地址，可以使用以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - --------------------------------
----------------- ---------- -
------ -------------------------
---------------------
--------- --------------------------------
---------- ----
---
-------------------------
---通过设置 basePath 参数，gulp-html-path-fixed 会将每个 html 文件中的路径替换为 http://cdn.example.com/assets，同时开启 html5Mode 参数，则会将路径中的 /public 替换为空字符串。这样，我们就可以在 HTML 中写入非常简洁的路径，并且通过 gulp-html-path-fixed 插件自动帮我们处理好路径问题。
总结
使用 gulp-html-path-fixed 可以帮助我们解决 html 文件路径不对的问题，让路径调整变得更加简单高效。通过上述教程的学习，我们可以更好地掌握这个插件的使用方法。希望这篇文章对你的前端开发能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055af281e8991b448d89c2