Gulp报错：未找到自身<SCRIPT>标签致LiveReload禁用，求解决方案

这个报错的核心原因很清晰：LiveReload需要在你的HTML页面中插入专属脚本标签来实现实时刷新，但目前你的页面不仅注释掉了自身的script.js引用，也没给LiveReload留出注入脚本的入口（或者你的Gulp配置没开启自动注入功能）。

下面是几种按优先级排序的可行解决方案：

方法1：让Gulp自动注入LiveReload脚本 #

如果你的Gulp任务使用gulp-livereload或类似插件，先确认配置里开启了自动注入。举个Gulpfile.js的示例：

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

// 监听文件变化的任务
gulp.task('watch', function() {
  livereload.listen({port: 35729}); // 默认端口，要和浏览器插件/手动配置一致
  gulp.watch(['*.html', '*.js'], gulp.series('reload'));
});

gulp.task('reload', function(done) {
  livereload.reload();
  done();
});

同时不要手动注释页面里的脚本引用，如果暂时不需要自己的script.js，至少保证页面存在一个空的<script>标签；更推荐用插件自动处理——很多LiveReload相关插件（比如connect-livereload配合gulp-connect）会自动在HTML的</body>标签前插入LiveReload脚本，无需手动添加。

方法2：手动添加LiveReload脚本标签 #

如果自动注入不生效，你可以在HTML的</body>前手动添加LiveReload脚本：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Empty Page</title>
</head>
<body>
  <!-- 手动添加LiveReload脚本，端口要和Gulp配置一致 -->
  <script src="http://localhost:35729/livereload.js"></script>
  <!-- 如果你需要自己的脚本，取消下面的注释 -->
  <!-- <script src="script.js" defer></script> -->
</body>
</html>

注意这里的35729是LiveReload默认端口，必须和你Gulp配置里的监听端口保持一致。

方法3：换用BrowserSync简化配置 #

其实很多开发者会用browser-sync替代单独的LiveReload插件，它内置了实时刷新功能，还能自动处理脚本注入，配置更简单：

const browserSync = require('browser-sync').create();

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: './' // 你的项目根目录
    },
    reloadOnRestart: true
  });

  // 监听文件变化自动刷新
  gulp.watch(['*.html', '*.js']).on('change', browserSync.reload);
});

用这种方式的话，你完全不需要在HTML里手动添加任何脚本，browser-sync会自动帮你完成注入。

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