gulp-inject未向index.html注入内容，求助解决编码异常问题

兄弟，我之前跟着教程折腾Gulp的时候也踩过这俩坑，给你一步步拆解解决办法：

一、搞定“Nothing to inject into index.html”报错 #

这个报错本质就是gulp-inject没找到要注入的文件，或者没识别到index.html里的注入标记，按下面的步骤排查：

• 检查index.html的注入占位符：确保你的源index.html里有正确的注释标记，比如注入CSS就加：

  <!-- inject:css -->
  <!-- endinject -->
  

  注入JS就加：

  <!-- inject:js -->
  <!-- endinject -->
  

  注意这些注释必须是纯文本，不能被转义（你生成的HTML里有<，大概率是前面的步骤把这些标记转义了，这点后面一起解决）
• 确认要注入的文件路径正确：打开你的Gulp任务代码，看看gulp.src里的路径是不是和实际生成的文件路径匹配，比如你编译后的CSS在dist/css/main.css，那路径就得写成./dist/css/**/*.css，别写错大小写或者层级（Windows虽然不区分大小写，但Gulp的路径匹配会严格对应）
• 调整Gulp任务的执行顺序：必须先把要注入的文件（比如CSS、JS）编译生成好，再执行inject任务。举个正确的任务示例：

  const gulp = require('gulp');
  const inject = require('gulp-inject');
  const sass = require('gulp-sass');
  
  // 先编译Sass到dist/css
  gulp.task('sass', function() {
    return gulp.src('./src/scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('./dist/css'));
  });
  
  // 依赖sass任务完成后再执行inject
  gulp.task('inject', ['sass'], function() {
    const target = gulp.src('./src/index.html');
    // 读取要注入的CSS和JS文件，{read: false}提升性能
    const sources = gulp.src(['./dist/css/**/*.css', './dist/js/**/*.js'], {read: false});
  
    return target.pipe(inject(sources))
      .pipe(gulp.dest('./dist'));
  });
  

二、解决HTML乱码及标签转义问题 #

你生成的HTML里出现�和<这类乱码+转义字符，主要是编码不统一和文件被错误转义导致的：

• 统一文件编码为UTF-8无BOM：用VS Code打开你的源index.html，右下角点击编码选项，切换为UTF-8，然后保存时选择“Save with Encoding > UTF-8 without BOM”（Windows记事本默认会加BOM，这是乱码的常见元凶）
• 排查是否有多余的转义插件：看看你的Gulp任务里有没有用gulp-htmlmin或者其他HTML处理插件，是不是配置里开了不必要的转义选项？比如htmlmin的collapseWhitespace如果搭配错误的参数，可能会把注入注释转义掉，同时破坏编码。如果不需要转义，暂时先禁用这类插件，测试正常后再调整配置。
• 指定输出文件编码：在inject任务输出到dist的时候，明确指定UTF-8编码，避免系统默认编码干扰：

  return target.pipe(inject(sources))
    .pipe(gulp.dest('./dist', { encoding: 'utf8' }));
  

先按上面的步骤排查，优先解决注入标记和路径的问题，再处理编码，应该就能搞定这俩问题了。

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