如何使用Gulp在HTML头部与主体注入JavaScript代码

嘿，这个需求我刚好实现过！用gulp-inject插件就能完美搞定你要的「第三方JS库注入<head>、自定义JS注入<body>」的效果，步骤很清晰，我给你拆解一下：

1. 先装必要的依赖 #

打开终端，安装Gulp核心和注入插件：

npm install --save-dev gulp gulp-inject

2. 编写Gulp配置文件（Gulpfile.js） #

这里的关键是给<head>和<body>的注入分别配置匹配规则，对应你HTML里的注释标记：

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

// 核心注入任务
gulp.task('inject-js', function() {
  // 目标HTML文件路径
  const targetHTML = gulp.src('./index.html');
  
  // 准备要注入的文件：<head>里的第三方库（比如jquery、d3）
  const headJS = gulp.src(['./jquery.js', './d3.js'], {read: false});
  // 准备要注入的文件：<body>里的自定义JS（比如index.js）
  const bodyJS = gulp.src(['./index.js'], {read: false});

  return targetHTML
    // 先处理<head>的注入，匹配你设置的<!-- injectJS -->和<!-- injected -->注释
    .pipe(inject(headJS, {
      starttag: '<!-- injectJS -->',
      endtag: '<!-- injected -->',
      ignorePath: './', // 去掉文件路径前缀，避免生成类似./jquery.js的路径
      addRootSlash: false
    }))
    // 再处理<body>的注入，用同样的注释标记就行
    .pipe(inject(bodyJS, {
      starttag: '<!-- injectJS -->',
      endtag: '<!-- injected -->',
      ignorePath: './',
      addRootSlash: false
    }))
    // 输出结果（这里直接覆盖原HTML，也可以改成输出到dist目录）
    .pipe(gulp.dest('./'));
});

// 可选：添加监听任务，文件变化自动重新注入
gulp.task('watch-js-inject', function() {
  gulp.watch(['./**.js', './index.html'], gulp.series('inject-js'));
});

3. 确保你的HTML有正确的占位注释 #

就用你给出的示例结构就行，注释标记是插件识别注入位置的关键：

<html>
  <head>
    <!-- injectJS -->
    <!-- injected -->
  </head>
  <body>
    <!-- injectJS -->
    <!-- injected -->
  </body>
</html>

4. 运行任务 #

在终端执行这条命令，就能完成注入：

gulp inject-js

运行后你的HTML会自动变成你想要的样子：

<html>
  <head>
    <!-- injectJS -->
    <script src="jquery.js"></script>
    <script src="d3.js"></script>
    <!-- injected -->
  </head>
  <body>
    <!-- injectJS -->
    <script src="index.js"></script>
    <!-- injected -->
  </body>
</html>

一些实用小提示 #

• 如果你的JS文件放在子目录（比如./libs/、./src/js/），记得修改src里的路径，比如./libs/*.js
• 要是不想覆盖原HTML文件，可以把gulp.dest('./')改成gulp.dest('./dist')，输出到打包目录
• {read: false}是告诉Gulp不用读取JS文件内容，只需要文件路径，能提升任务运行速度

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