如何使用Gulp按对应目录将JS文件注入到HTML中？

云上老周

2026-5-25

用Gulp实现按目录匹配注入JS到对应HTML的方案

你的问题核心是要让每个目录下的JS只注入到同目录的HTML文件中，但现有的代码会把所有目录的JS都注入到每一个HTML里，这显然不符合需求。我来给你调整一下代码，完美解决这个问题：

首先，我们需要借助gulp-tap来逐个处理每个HTML文件，这样就能动态获取当前HTML所在的目录，只注入该目录下的JS文件。如果还没安装gulp-tap，先执行安装命令：

npm install --save-dev gulp-tap gulp-inject

然后修改你的Gulp任务代码如下：

const gulp = require('gulp');
const inject = require('gulp-inject');
const tap = require('gulp-tap');

gulp.task('injectRelative', function () {
  // 匹配所有目标HTML文件（比如a/a.html、b/b.html）
  return gulp.src('./build/**/*.html')
    .pipe(tap(function (file) {
      // 获取当前HTML文件所在的目录路径
      const currentDir = file.path.replace(file.basename, '');
      // 只选取当前目录下的JS文件作为注入源
      const targetJsFiles = gulp.src(`${currentDir}*.js`, { read: false });

      // 对当前HTML单独执行注入操作
      return gulp.src(file.path)
        .pipe(inject(targetJsFiles, { relative: true }))
        .pipe(gulp.dest(currentDir));
    }));
});

代码解释：

gulp-tap的作用是让我们能逐个访问流中的每个HTML文件，这样就能精准定位到它所在的目录。
currentDir变量提取出当前HTML的目录路径，比如处理a/a.html时，它的值就是./build/a/。
我们动态生成该目录下的JS文件列表作为注入源，这样就只会把同目录的a1.js、a2.js注入到a.html，b目录的JS也只会注入到b.html。
最后把处理后的HTML放回原目录，保证目录结构不变。