問題描述

我們的團隊使用 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 :)

這篇關于如何禁用 BrowserSync 的跨設備動作鏡像功能?(幽靈模式)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！