BrowserSync 不刷新 HTML 文件答案

【问题标题】：BrowserSync doesn't refresh HTML filesBrowserSync 不刷新 HTML 文件
【发布时间】：2018-10-25 16:08:51
【问题描述】：

BrowserSync 可以正确刷新我正在修改的任何 PHP 页面、SCSS 或 JS。但对于 HTML 文件，它不会刷新任何内容。为什么不呢？

注意我的gulpfile.js 嵌套在它自己的子文件夹/gulp/ 中，这是它的内容：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var autoprefixer  = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var onError = function (err) {
  console.log('An error occurred:', gutil.colors.magenta(err.message));
  gutil.beep();
  this.emit('end');
};

gulp.task('sass', function() {
  return gulp.src('../assets/styles/**/*.scss')
  .pipe(plumber({ errorHandler: onError }))
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(gulp.dest('../dist/styles'))
  .pipe(browserSync.reload({stream: true}))
});

gulp.task('js', function() {
  return gulp.src(['../assets/scripts/*.js'])
    .pipe(gulp.dest('../dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('browserSync', function() {
  browserSync.init({
    proxy: 'http://127.0.0.1/vuejs/',
  })
})

gulp.task('watch', ['browserSync','js','sass'], function() {
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload);
  gulp.watch('../**/**/*.html', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', ['js']);
});

【问题讨论】：

请提供一个示例项目。另外请说明您在哪个操作系统上使用它？

标签： gulp browser-sync

【解决方案1】：

您的“监视”任务过于复杂，可能 gulp 会感到困惑。试试：

gulp.task('watch', ['browserSync','js','sass'], function() {

  // you are already calling reload in your sass and js tasks so remove it here
  // plus the array is for tasks, not a function call
  // also those 'tasks' would run in parallel - which is not what you want

  gulp.watch('../assets/styles/**/*.scss',['sass']);

  gulp.watch('../**/**/*.php', browserSync.reload);

  // you must be able to simplify the following three lines
  // ** will match on zero or more entries so all three of these
  // will match '../*.html', so try keeping only the first

 // EDIT : try this for html reload

  gulp.watch("../**/**/*.html").on("change", browserSync.reload);


  // gulp.watch('../**/**/*.html', browserSync.reload);
  // gulp.watch('../**/*.html', browserSync.reload);
  // gulp.watch('../*.html', browserSync.reload);

  // see above
  gulp.watch('../assets/scripts/*.js', ['js']);

  //  a duplicate, remove
  // gulp.watch('../*.html', browserSync.reload);
});

【讨论】：

谢谢。我进行了编辑以显示我应用了您建议的更改，现在它可以工作一次，之后它就不再工作了（不再刷新）
我编辑了我的答案，为 html 监听器添加了另一个建议。
谢谢，但现在完全没有刷新了，就像以前一样：/

【解决方案2】：

我相信您的问题在于您使用的相对路径。你为什么不设置 gulp 来观察每个 html 文件：

// add reference to reload function in your var list
var reload = browserSync.reload;

gulp.task('watch', ['browserSync','js','sass'], function() {
    gulp.watch("*.html").on("change", reload);
});

【讨论】：

【解决方案3】：

我遇到了类似的问题并转而注入 HTML，而不是完全重新加载 - 更快，您仍然可以获得所需的更改。我使用了 bs-html-injector。以下是它的外观。

var htmlInjector = require("bs-html-injector");

gulp.task('watch', ['browserSync','js','sass'], function() {
      gulp.watch('../assets/styles/**/*.scss',['sass']);
      gulp.watch('../**/**/*.php', browserSync.reload);
      gulp.watch('../**/**/*.html', htmlInjector);
      gulp.watch('../assets/scripts/*.js', ['js']);
});

请注意，您需要稍微更改浏览器同步任务：

gulp.task('browsersync', function() {
    browsersync.use(htmlInjector, {
        files: "./wherever"
    });
    browsersync.init({
        server:"./anotherfolder" //launch server
    });
});

【讨论】：

谢谢，不过似乎没有任何改变。
下一个想法是，也许这就是你启动 browsersync 的方式——你的服务器指向哪里？
不确定我是否理解这个问题。

【解决方案4】：

gulp.task('watch', ['browserSync'], function() {
  gulp.watch('../**/**/*.html', browserSync.reload);
  gulp.watch('../assets/styles/**/*.scss',['sass']);
  gulp.watch('../**/**/*.php', browserSync.reload);
  gulp.watch('../assets/scripts/*.js', ['js']);
});

在这里，我在链上提出了 html 操作，以防万一其他操作正在积极地弄乱它，也可以尝试相反的操作。还删除了参数中的冗余。从我在这里看到的情况来看，不需要或保证在参数数组内运行“sass”和“js”，因为这些任务在它们各自的 gulp.watch 行上运行，以寻找基本代码中的更改。

【讨论】：