如何禁用 BrowserSync 的跨设备动作镜像功能?(幽灵模式)

2022-01-12 00:00:00 web-applications javascript gulp browser-sync yeoman

我们的团队使用 gulp-angular 生成器和 yeoman 来搭建我们的网络应用程序.它使用 browsersync 来处理我们想要的实时重新加载.但是，我们刚刚部署到我们的开发服务器，现在当两个开发人员同时使用 gulp serve 命令时，他们都显示在同一个窗口中(即一个开发人员在一个窗口上键入，它显示在另一个开发人员的窗口中以及).我相信这是由于 BrowserSync 的跨设备测试功能，但是我不知道如何禁用此功能.如果有人知道如何做到这一点(最好不要禁用我们的实时重载功能)，请告诉我！

Our team used the gulp-angular generator with yeoman to scaffold out our web app. It uses browsersync to handle live reloads, which we want. However, we just deployed to our development server, and now when two developers are using the gulp serve command at the same time, they both are shown the same window (i.e. one developer types on one window, it shows up in the other developer's window as well). I believe this is due to BrowserSync's cross-device testing capabilities, however I am at a loss for how to disable this feature. If anyone knows how to do this (preferably without disabling our live-reload functionality) please let me know!

下面是我在 gulp 文件夹中的 server.js 文件的代码，它与 gulp-angular 生成器附带的代码相同，所以希望这对某些人有所帮助.

Below is the code for my server.js file in the gulp folder, which is the same as the one that comes with the gulp-angular generator, so hopefully this will help some people.

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var proxyMiddleware = require('http-proxy-middleware');

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
  };

  /*
   * You can add a proxy to your backend by uncommenting the line bellow.
   * You just have to configure a context which will we redirected and the target url.
   * Example: $http.get('/users') requests will be automatically proxified.
   *
   * For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.0.5/README.md
   */
  // server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', proxyHost: 'jsonplaceholder.typicode.com'});

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser
  });
}

browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
}));

gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

推荐答案

遇到同样的问题，你可以简单地在init选项中将ghost mode设置为false.

Faced same problem, you can simply set ghost mode to false in init options.

     browserSync.instance = browserSync.init({
      startPath: '/',
      ghostMode: false,
      server: server,
      browser: browser
     });

不需要更改 default.config.js :)

no need to change in default.config.js :)

相关文章