如何修改移至根目录的HTML文件中打包文件的路径？

你已经成功把dist里的index.html移到根目录了，接下来只需要用gulp-replace插件批量替换HTML里的资源路径就行，具体步骤如下：

1. 安装依赖插件 #

首先在项目里安装gulp-replace，它能帮我们批量替换文件里的文本内容：

npm install gulp-replace --save-dev

2. 修改Gulp任务 #

更新你的gulpfile.js，引入插件并修改（或新增）任务，把路径替换和文件移动合并到一起：

const gulp = require('gulp');
const replace = require('gulp-replace');

// 要处理的目标文件
const filesToMove = ['dist/index.html'];

gulp.task('move-and-fix-paths', function() {
  return gulp.src(filesToMove, { base: './' })
    // 替换link标签的href属性：给相对路径加上dist/前缀（跳过CDN/绝对路径）
    .pipe(replace(/href="(?!https?:\/\/|\/\/)([^"]+)"/g, 'href="dist/$1"'))
    // 替换script标签的src属性：同样给相对路径加上dist/前缀
    .pipe(replace(/src="(?!https?:\/\/|\/\/)([^"]+)"/g, 'src="dist/$1"'))
    // 把处理后的文件输出到根目录
    .pipe(gulp.dest('./'));
});

3. 任务细节说明 #

• 正则里的(?!https?:\/\/|\/\/)是为了跳过CDN或绝对路径的资源，避免把像https://xxx.com/style.css这样的外部链接也加上dist前缀
• 如果你的资源都放在dist下的子文件夹（比如dist/assets），原来的路径是assets/xxx，替换后会自动变成dist/assets/xxx，完美适配根目录的index.html
• 执行任务的命令是gulp move-and-fix-paths（如果你沿用原来的任务名，直接改move任务的内容即可）

自定义路径调整 #

如果你的资源路径有特殊情况，比如有些资源本来就在根目录不需要加前缀，或者只想替换特定后缀的资源，可以修改正则规则。比如只替换.css/.js/.ico/.png这类资源：

// 只替换指定后缀的资源路径
.pipe(replace(/href="([^"]+\.(css|ico|png|jpg))"/g, 'href="dist/$1"'))
.pipe(replace(/src="([^"]+\.(js|png|jpg))"/g, 'src="dist/$1"'))

这样就能精准控制要替换的资源路径啦！

内容的提问来源于stack exchange，提问作者Kumaresan Sd