javascript - como - browsersync gulp

¿Cómo deshabilitar la funcionalidad de creación de reflejo de acciones entre dispositivos de BrowserSync?(Modo fantasma)

Question

Nuestro equipo usó el generador tridimensional con yeoman para andamiar nuestra aplicación web. Utiliza browsersync para manejar recargas en vivo, lo que deseamos. Sin embargo, acabamos de implementar en nuestro servidor de desarrollo, y ahora, cuando dos desarrolladores están usando el comando gulp serve al mismo tiempo, a ambos se les muestra la misma ventana (es decir, un tipo de desarrollador en una ventana, aparece en la ventana del otro desarrollador). también). Creo que esto se debe a las capacidades de prueba de dispositivos cruzados de BrowserSync, sin embargo, no sé cómo deshabilitar esta función. Si alguien sabe cómo hacerlo (preferiblemente sin deshabilitar nuestra funcionalidad de recarga en vivo), ¡avíseme!

A continuación se muestra el código para mi archivo server.js en la carpeta gulp, que es el mismo que el que viene con el generador angular-gulp, así que espero que esto ayude a algunas personas.

''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

Al enfrentar el mismo problema, simplemente puede configurar el modo fantasma en falso en las opciones de inicio.

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

no es necesario cambiar en default.config.js :)

Answer 2

En caso de que use el inicio rápido para inicializar su proyecto, la configuración de BrowserSync se puede configurar utilizando el archivo bs-config.json en la carpeta raíz del proyecto.

Mi archivo contiene lo siguiente:

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

Answer 3

Lamento responder mi propia pregunta, pero encontré la respuesta unos días después y como nadie ha respondido esto, pensé en publicar mi solución.

El problema con el que nos encontramos parece ser causado por una función en BrowserSync llamada " GhostMode " que refleja las acciones de clic y desplazamiento, así como varias acciones de formulario, en todos los dispositivos. Deshabilitar esto es muy simple: busque el archivo de configuración de su BrowserSync (para mí fue en root / node_modules / browser-sync / lib / default.config.js) y ábralo. Busca en ese archivo algo similar a lo siguiente:

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

y cambiarlo de modo que diga ghostMode: false,

Esto solucionó nuestro problema y esperamos que esto ayude a otros si se encuentran con el mismo problema.