Come disabilitare la funzionalità di mirroring delle azioni tra dispositivi di BrowserSync? (GhostMode)

Question

Il nostro team ha utilizzato il generatore angolare con yeoman per impalcare la nostra app Web. Utilizza browsersync per gestire le ricariche live, che vogliamo. Tuttavia, ci siamo appena schierati sul nostro server di sviluppo, e ora quando due sviluppatori stanno usando il comando gulp service allo stesso tempo, entrambi vengono mostrati nella stessa finestra (cioè un tipo di sviluppatore su una finestra, compare nella finestra degli altri sviluppatori anche). Credo che ciò sia dovuto alle funzionalità di test cross-device di BrowserSync, tuttavia non sono a conoscenza di come disabilitare questa funzione. Se qualcuno sa come fare questo (preferibilmente senza disabilitare la nostra funzionalità live-reload) per favore fatemelo sapere!

Di seguito è riportato il codice per il mio file server.js nella cartella Gulp, che è lo stesso di quello fornito con il generatore angolare, quindi speriamo che questo possa aiutare alcune persone.

'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, []); 
}); 

Answer 1

Di fronte allo stesso problema, è possibile semplicemente impostare la modalità ghost su false nelle opzioni di init.

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

c'è bisogno di cambiare in default.config.js :)

Answer 2

Mi dispiace di rispondere alla mia domanda, ma ho trovato la risposta pochi giorni dopo e da allora nessuno ha ancora risposto a questo ho pensato di postare la mia soluzione.

Il problema riscontrato era causato da una funzione di BrowserSync denominata "GhostMode" che esegue il mirroring delle azioni di clic e scorrimento e di diverse azioni modulo su più dispositivi. Disabilitarla è molto semplice: cerca il tuo file di configurazione BrowserSync (per me era root/node_modules/browser-sync/lib/default.config.js) e aprilo. Cerca in quel file per qualcosa di simile al seguente:

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

e modificarlo in modo che si dice ghostMode: false,

Questo risolto il nostro problema e spero che questo aiuterà altri se incontrano lo stesso problema.

Answer 3

Nel caso in cui si utilizza il QuickStart seed per inizializzare il progetto, le impostazioni del BrowserSync possono essere configurate utilizzando bs-config.json di file nella cartella radice del progetto.

mio file contiene il seguente:

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