BrowserSync Proxy & Reloading

[camdagr8]

Issue details

I'm using BrowserSync via gulp with a node server running so I'm proxying to that. Then I'm using nodemon (https://www.npmjs.com/package/gulp-nodemon) to watch for changes on my server. When changes are made, the browserSync.reload() function is called.

When the reload is triggered I get:

[14:05:02] [nodemon] restarting due to changes...
[14:05:02] [nodemon] starting `node ./dist/index.js`
[14:05:04] [NODE] Server running on port: 9000
[BROWSERSYNC] Reloading Browsers...

The reload actually happens but it never gives me a confirmation after the fact. It's been annoying the crap out of me as I can't figure out why.

---

• Browsersync [ 2.18.8 ]
• Node [ 7.5.0 ]
• Npm [ 4.1 ]

Affected platforms

• linux
• windows
• OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API
• Gulp
• Grunt
• CLI

/**
 * -----------------------------------------------------------------------------
 * Dependencies
 * -----------------------------------------------------------------------------
 */
const browserSync = require('browser-sync');
const csso = require('gulp-csso');
const del = require('del');
const gulp = require('gulp');
const gulpif = require('gulp-if');
const gutil = require('gulp-util');
const install = require('gulp-install');
const nodemon = require('gulp-nodemon');
const prefix = require('gulp-autoprefixer');
const runSequence = require('run-sequence');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const webpack = require('webpack');
const _ = require('underscore');


/**
 * -----------------------------------------------------------------------------
 * Configuration
 * -----------------------------------------------------------------------------
 */
const config = {
	port: {
		browsersync: 9090,
		proxy: 9000
	},
	browsers: 'last 1 version',
	dest: 'dist',
	src: 'src',
	dev: gutil.env.dev,
	scripts: {
		dest	: 'src/public/assets/js',
		src	: 'src/public/src/js/app.js',
		watch	: 'src/public/src/js/**/*'
	},
	styles: {
		dest	: 'src/public/assets/css',
		src	: 'src/public/src/css/style.scss',
		watch	: 'src/public/src/css/**/*.scss'
	},
	build: {
		src: [
			'*.*',
			'src/**',
			'!{node_modules,node_modules/**}',
			'!{src/public/src,src/public/src/**}',
			'!{logs,logs/**}',
			'!webpack.config.js',
			'!gulpfile.js',
			'!{dist,dist/**}'
		],
		watch: [
			'*.*',
			'src/**',
			'!{node_modules,node_modules/**}',
			'!{src/public/src,src/public/src/**}',
			'!{logs,logs/**}',
			'!webpack.config.js',
			'!gulpfile.js',
			'!{dist,dist/**}'
		]
	}
};



/**
 * -----------------------------------------------------------------------------
 * Tasks
 * -----------------------------------------------------------------------------
 */


// clean
gulp.task('clean', (done) => {
	del.sync([config.dest]);
	done();
});


// styles
gulp.task('styles', () => {
	return gulp.src(config.styles.src)
		.pipe(gulpif(config.dev, sourcemaps.init()))
		.pipe(sass({includePaths: './node_modules'}).on('error', sass.logError))
		.pipe(prefix(config.browsers))
		.pipe(gulpif(!config.dev, csso()))
		.pipe(gulpif(config.dev, sourcemaps.write()))
		.pipe(gulp.dest(config.styles.dest))
		.pipe(gulpif(config.dev, browserSync.stream()));
});


// scripts
const webpackConfig = require('./webpack.config')(config);
gulp.task('scripts', (done) => {
	webpack(webpackConfig, (err, stats) => {
		if (err) {
			gutil.log(gutil.colors.red(err()));
		}
		const result = stats.toJson();
		if (result.errors.length) {
			result.errors.forEach((error) => {
				gutil.log(gutil.colors.red(error));
			});
		}
		done();
	});
});


// assemble
gulp.task('assemble', ['styles', 'scripts'], () => {
	return gulp.src(config.build.src)
	.pipe(gulp.dest(config.dest));
});


// nodemon -> start server and reload on change
gulp.task('nodemon', (done) => {
	if (!config.dev) { done(); return; }

	let callbackCalled = false;
	nodemon({
		watch : config.dest,
		script: './'+config.dest+'/index.js',
		ext: 'js ejs json jsx html css scss'
	}).on('start', function () {
		if (!callbackCalled) {
			callbackCalled = true;
			done();
		}
	}).on('restart', function () {
		browserSync.reload();
	});
});


// serve -> browserSync & watch start
gulp.task('serve', (done) => {
	browserSync({
		notify: false,
		timestamps: true,
		reloadDelay: 500,
		reloadDebounce: 2000,
		logPrefix: 'BROWSERSYNC',
		port: config.port.browsersync,
		ui: {port: config.port.browsersync+1},
		proxy: 'localhost:'+config.port.proxy
	});

	gulp.task('styles:watch', ['styles']);
	gulp.watch([config.styles.watch], ['styles:watch']);

	gulp.task('scripts:watch', ['scripts'], reload);
	gulp.watch([config.scripts.watch], ['scripts:watch']);

	gulp.watch(config.build.watch, watcher);

	done();
});


/**
 * -----------------------------------------------------------------------------
 * Watch handler
 * -----------------------------------------------------------------------------
 */
const watcher = (e) => {

	let p = e.path.split(__dirname + '/' + config.src).join('');
	let s = config.src + p;

	if (e.type === 'deleted') {
		let d = __dirname + '/' + config.dest + p;

		del.sync([d]);

	} else {

		p = config.dest + p;

		let a = p.split('/');
		a.pop();

		p = a.join('/');

		gulp.src(s)
		.pipe(gulp.dest(p));
	}
};

// default
gulp.task('default', (done) => {
	let tasks = [];

	if (config.dev) {
		tasks.push('nodemon');
	}

	runSequence(['clean'], ['assemble'], tasks, () => {
		if (config.dev) { gulp.start('serve'); }
		done();
	});
});

[shakyShane]

What do you mean by 'it never gives me a confirmation after the fact' - what's your expectation?

[camdagr8]

Well, when you use Reloading Browsers... as the log message, you would think there would be a Reload complete message as the ... lead you to believe something else is to occur.

[shakyShane]

Ahh I see. Well there's no concept (atm) of browsers validating a message was received I'm afraid

[camdagr8]

I understand that this might seem trivial, it's just annoying when you're bug hunting a build process and you're not sure where the issue is and if the messages leaves you hanging on like that, it could point you in the wrong direction.

[Riobe]

@camdagr8 If you turn notify: true, you will get those toastr like message in your browser that will let happen in the browser when browser-sync has reloaded it. It's not in your console, but if you're looking at you're browser you'll see it there.

Also, if you have the network tab open of any dev tools you should see a reload happen.

Not going to help you if you're using the CLI to see when it's been reloaded, but maybe that would be sufficient.