web-dev-qa-db-fra.com

Comment désactiver la fonctionnalité de mise en miroir d'actions multi-appareils de BrowserSync? (Mode fantôme)

Notre équipe a utilisé le générateur angulaire de gorgée avec yeoman pour échafauder notre application Web. Il utilise Browsersync pour gérer les rechargements en direct, ce que nous voulons. Cependant, nous venons de déployer sur notre serveur de développement, et maintenant, lorsque deux développeurs utilisent la commande gulp serve en même temps, ils ont tous deux la même fenêtre (c.-à-d. Un type de développeur sur une fenêtre, elle apparaît dans la fenêtre de l'autre développeur ainsi que). Je crois que cela est dû aux capacités de test multi-appareils de BrowserSync, mais je ne sais pas comment désactiver cette fonctionnalité. Si quelqu'un sait comment faire cela (de préférence sans désactiver notre fonctionnalité de rechargement en direct), faites-le moi savoir!

Vous trouverez ci-dessous le code de mon fichier server.js dans le dossier gulp, qui est le même que celui fourni avec le générateur gulp-angular, donc j'espère que cela aidera certaines personnes.

'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, []);
});
javascriptweb-applicationsgulpyeomanbrowser-sync
27
turner

Face au même problème, vous pouvez simplement définir le mode fantôme sur false dans les options d'initialisation.

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

pas besoin de changer dans default.config.js :)

50
Muhammad

Désolé de répondre à ma propre question, mais j'ai trouvé la réponse quelques jours plus tard et puisque personne n'a encore répondu à cela, j'ai pensé publier ma solution.

Le problème que nous rencontrions semble être causé par une fonctionnalité de BrowserSync appelée " GhostMode " qui reflète les actions de clic et de défilement, ainsi que plusieurs actions de formulaire, sur tous les appareils. La désactivation est très simple: recherchez votre fichier de configuration BrowserSync (pour moi, il se trouvait dans root/node_modules/browser-sync/lib/default.config.js) et ouvrez-le. Recherchez dans ce fichier quelque chose de similaire à ce qui suit:

ghostMode: {
    clicks: true,
    scroll: true,
    forms: {
        submit: true,
        inputs: true,
        toggles: true
    }
},

et changez-le pour qu'il indique ghostMode: false,

Cela a résolu notre problème et j'espère que cela aidera les autres s'ils rencontrent le même problème.

13
turner

Si vous utilisez graine de démarrage rapide pour initialiser votre projet, les paramètres de BrowserSync peuvent être configurés à l'aide de bs-config.json fichier dans le dossier racine du projet.

Mon dossier contient les éléments suivants:

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  },
  "ghostMode": false
}
2
Gerhat