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!
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.
'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, []); });
How Does BrowserSync Work? BrowserSync starts a small web server. If you're already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets.
In Sublime Text 3 go to Preferences -> Browse Packages... Open 'Browser Sync' folder and edit the browser property in browser_sync_launch. js file. Save this answer.
The BrowserSync is used to watch all HTML and CSS files in the css directory and performs the live reload to the page in all browsers whenever files were changed. BrowserSync makes workflow faster by synchronizing URL's, interactions and code changes across multiple devices.
Faced same problem, you can simply set ghost mode to false in init options.
browserSync.instance = browserSync.init({ startPath: '/', ghostMode: false, server: server, browser: browser });
no need to change in default.config.js :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With