为什么 browsersync 不重新加载页面

Question

问题在于流重新加载页面
只需重新加载方法即可正常工作

但是当我使用 browserSync.stream() (browserSync.reload({stream: true})) 时它不起作用

这是我的浏览器同步初始化函数

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  var server = {
    baseDir: baseDir,
    routes: routes,
    middleware: proxyMiddleware('http://0.0.0.0:8080')
  };

  var nodemonConfig = {
    cwd: path.normalize(__dirname + '/../../'),
    script: 'server/server.js',
    ext: 'js json',
    ignore: ['client/**/*.*'],
    env: {'PORT': '8080'}
  };
  var serverStarted;

  nodemon(nodemonConfig)
    .on('start', function () {
      if (serverStarted) return;

      browserSync.init(null, {
        startPath: '/',
        open: false,
        server: server,
        browser: browser
      });
      serverStarted = true;
    });
}

代理服务器它是 Loopback 应用程序（可能是这个问题）

这是重新加载样式和脚本的任务

gulp.task('styles-reload', ['styles'], function() {
  return buildStyles()
    .pipe(browserSync.stream());
});


gulp.task('scripts-reload', ['scripts'], function() {
  return buildScripts()
    .pipe(browserSync.stream());
});

Answer 1

流用于从任务的 Gulp 流中注入脚本/css/等，这就是为什么在 the documentation 中提到将其放在 gulp.dest 之后。

如果您希望手动重新加载 BrowserSync 页面，您可以在两个函数中使用 .reload 来执行此操作，否则，您需要将文件传递到您的重新加载任务中，因为看起来您正在从其他地方调用这些任务。

此外，我认为没有理由将这两个任务（样式/脚本及其各自的 -reload 任务）分开。您应该只在 dest 之后通过管道传输它，这样您就不必为启动新流或在任务之间合并而烦恼。