浏览器同步不会在监视任务完成时重新加载页面

Question

我的观看任务是这样的：

const select = {
   js: './src/components/**/*.js',
   scss: [
    './src/global/**/*.scss',
    './src/components/**/*.scss'
  ],
  html: [
    './src/components/**/*.cshtml',
    './src/components/**/*.html'
  ]
};

gulp.task('watch', () => {
  gulp.watch(select.js, ['scripts']);
  gulp.watch(select.scss, ['styles']);
  gulp.watch(select.cshtml, ['views']);
});

我的风格任务是这样的：

const scssForCompile = [
  './src/global/scss/style.scss'
];

gulp.task('styles', () => {
  return gulp.src(scssForCompile)
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(gulp.dest('./build/styles'))
    .pipe(browsersync.reload({stream: true}));
});

请注意 scssForCompile 不同于 select.scss。每次我编辑任何文件时，相关的资产文件都会更新 - 到目前为止没问题。唯一的问题是每次资产文件更新时我都不会重新加载。

我假设

.pipe(browsersync.reload({stream: true}));

应该可以解决问题，但事实并非如此。当我的资产文件更新时，有人可以帮助使用 browserify 重新加载页面吗？

code on git hub

Answer 1

问题是您正在处理 browsersync 的两个不同实例。

在tasks/styles.js中你需要默认实例：

const browsersync = require('browser-sync');

但是在 tasks/server.js 你创建了一个 new 实例使用 create():

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

因此，当您在 tasks/styles.js 中执行 .pipe(browsersync.reload({stream: true})) 时，您正在尝试通知一个 browsersync 实际上不是的实例运行.

您需要更改 tasks/server.js 以使用默认实例：

const browsersync = require('browser-sync');

浏览器同步不会在监视任务完成时重新加载页面

Browser-sync doesn't reload the page on watch tasks completion

javascript

browserify

gulp