Wie kann die geräteübergreifende Aktionsspiegelungsfunktion von BrowserSync deaktiviert werden? (GhostMode)

Question

Unser Team nutzte den gulp-eckigen Generator mit Yeoman, um unsere Web-App zu rüsten. Es verwendet browsersync, um Live-Reloads zu verarbeiten, die wir wollen. Allerdings haben wir gerade auf unserem Entwicklungsserver eingesetzt, und jetzt, wenn zwei Entwickler den Befehl gulp serve gleichzeitig verwenden, wird beiden dasselbe Fenster angezeigt (dh ein Entwickler gibt in einem Fenster einen Namen ein, der im anderen Entwicklerfenster angezeigt wird) auch). Ich glaube, dies liegt an den geräteübergreifenden Testfunktionen von BrowserSync, aber ich weiß nicht, wie ich diese Funktion deaktivieren kann. Wenn jemand weiß, wie das geht (vorzugsweise ohne unsere Live-Reload-Funktion zu deaktivieren), lass es mich wissen!

Unten ist der Code für meine server.js-Datei in dem Ordner schluck, die die gleiche wie die, die mit dem Zug-Winkelgenerator kommt, so hoffentlich wird dies einige Leute helfen.

'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

Mit demselben Problem konfrontiert, können Sie einfach Ghost-Modus in Init-Optionen auf false setzen.

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

keine Notwendigkeit, in default.config.js :) Sie die QuickStart seed Ihr Projekt zu initialisieren verwenden

Answer 2

Leider meine eigene Frage zu beantworten, aber ich fand die Antwort ein paar Tage später und da niemand diese noch nicht beantwortet hat Ich dachte, ich meine Lösung veröffentlichen würde.

Das Problem, das wir scheint wurden Begegnung durch ein Merkmal in BrowserSync verursacht werden genannt „GhostMode“, die Aktionen Spiegel klicken und scrollen, sowie mehrere Formularaktionen, auf verschiedenen Geräten. Das Deaktivieren ist sehr einfach: Suchen Sie nach Ihrer BrowserSync-Konfigurationsdatei (für mich war es root/node_modules/browser-sync/lib/default.config.js) und öffnen Sie diese. Suchen Sie in dieser Datei für etwas ähnlich der folgenden:

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

und es ändern, so dass es sagt ghostMode: false,

Das ist unser Problem behoben und hoffentlich wird dies anderen helfen, wenn sie das gleiche Problem auftritt.

Answer 3

Falls sich ändern, können die Einstellungen von BrowserSync Datei bs-config.json mit konfiguriert werden im Stammordner des Projekts.

Meine Datei enthält folgende Komponenten:

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