javascript 如何禁用 BrowserSync 的跨设备动作镜像功能？（幽灵模式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32510840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable cross-device action mirroring functionality of BrowserSync? (GhostMode)
提问by turner
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!
我们的团队使用带有 yeoman 的 gulp-angular 生成器来构建我们的 Web 应用程序。它使用 browsersync 来处理我们想要的实时重新加载。然而，我们刚刚部署到我们的开发服务器，现在当两个开发者同时使用 gulp serve 命令时，他们都显示在同一个窗口中（即一个开发者在一个窗口中键入，它显示在另一个开发者的窗口中）同样）。我相信这是由于 BrowserSync 的跨设备测试功能，但是我不知道如何禁用此功能。如果有人知道如何执行此操作（最好不要禁用我们的实时重新加载功能），请告诉我！
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.
下面是我在 gulp 文件夹中的 server.js 文件的代码，它与 gulp-angular 生成器附带的代码相同，所以希望这会对一些人有所帮助。
'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, []);
});
回答by Muhammad
Faced same problem, you can simply set ghost mode to false in init options.
面对同样的问题，您可以简单地在 init 选项中将 ghost mode 设置为 false。
browserSync.instance = browserSync.init({
startPath: '/',
ghostMode: false,
server: server,
browser: browser
});
no need to change in default.config.js :)
无需更改 default.config.js :)
回答by turner
Sorry to answer my own question, but I found the answer a few days later and since no one has answered this yet I thought I'd post my solution.
很抱歉回答我自己的问题，但几天后我找到了答案，因为还没有人回答这个问题，所以我想我会发布我的解决方案。
The problem we were encountering seems to be caused by a feature in BrowserSync called "GhostMode" which mirrors click and scroll actions, as well as several form actions, across devices. Disabling this is very simple: Look for your BrowserSync config file (for me it was at root/node_modules/browser-sync/lib/default.config.js) and open that. Search in that file for something similar to the following:
我们遇到的问题似乎是由 BrowserSync 中的一个名为“ GhostMode”的功能引起的，它反映了跨设备的单击和滚动操作以及多个表单操作。禁用它非常简单：查找您的 BrowserSync 配置文件（对我来说它位于 root/node_modules/browser-sync/lib/default.config.js）并打开它。在该文件中搜索类似于以下内容的内容：
ghostMode: {
clicks: true,
scroll: true,
forms: {
submit: true,
inputs: true,
toggles: true
}
},
and change it so that it says ghostMode: false,
并更改它，使其显示 ghostMode: false,
This fixed our issue and hopefully this will help others if they encounter the same problem.
这解决了我们的问题，希望这对遇到同样问题的其他人有所帮助。
回答by Gerhat
In case you use the QuickStart seedto initialize your project, the settings of BrowserSync can be configured using bs-config.jsonfile at project's root folder.
如果您使用QuickStart 种子初始化您的项目，则可以使用项目根文件夹中的bs-config.json文件配置 BrowserSync 的设置。
My file contains the following:
我的文件包含以下内容：
{
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
}
},
"ghostMode": false
}
回答by Isuru Kariyawasam
For JHIPSTER application just add the ghostMode: false,
对于 JHIPSTER 应用程序，只需添加 ghostMode: false,
new BrowserSyncPlugin({
ghostMode: false,
host: 'localhost',
port: 9000,
proxy: {
target: 'http://localhost:9060',
ws: true
}
回答by KyleMit
If Browsersync is launched over the command line, it'll provide two different addresses:
如果 Browsersync 通过命令行启动，它将提供两个不同的地址：
Select the address for the UI/ Admin Controls
From there you can setup configuration settings with the UI and disable cross device mirroring
选择UI/Admin Controls的地址
从那里您可以使用 UI 设置配置设置并禁用跨设备镜像
