浏览器同步不会在观看任务完成时重新加载页面答案

【问题标题】：Browser-sync doesn't reload the page on watch tasks completion浏览器同步不会在观看任务完成时重新加载页面
【发布时间】：2016-08-30 05:18:20
【问题描述】：

我的watch任务是这样的：

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

【问题讨论】：

您的 gulpfile 没有明显问题。您需要提供MCVE。
@SvenSchoenung 感谢您的回复。我为它创建了一个 git hub 仓库，你可以找到链接 github.com/neginbasiri/gulpsetup

标签： javascript gulp browserify

【解决方案1】：

问题是您正在使用browsersync 的两个不同实例。

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

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

但是在 tasks/server.js 中，您使用 create() 创建一个 new 实例：

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

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

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

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

【讨论】：