Less Changes reloads the website

[dashawk]

Issue details

Every time there is a change in any of the less files, the browser reloads but the changes made from the less file did not reflect on the website.

Steps to reproduce/test case

Here is my gulp task

// Here is the modified styles task
gulp.task('styles', function () {
	var bundle = gulp
		.src(config.client + 'app/themes/' + THEME_NAME + '/less/styles.less')
		.pipe($.plumber())
		.pipe($.less())
		.pipe($.autoprefixer({
			browsers: ['last 2 versions', '> 5%']
		}))
		.pipe($.concat('themeStyles.tmp'));

	var globalStyle = gulp
		.src(config.less)
		.pipe($.plumber())
		.pipe($.less())
		.pipe($.autoprefixer({
			browsers: ['last 2 versions', '> 5%']
		}))
		.pipe($.concat('globalStyles.tmp'));

	var stream = merge(bundle, globalStyle)
		.pipe($.concat('styles.css'))
		.pipe(gulp.dest(config.temp));

	return stream;
});

// Here is the modified less-watcher
gulp.task('less-watcher', function () {
	gulp.watch([
		config.client + 'app/themes' + THEME_NAME + '/less/**/*.*',
		config.less
	], ['styles']);
});

// Here is the modified startBrowserSync function
function startBrowserSync(isDev, specRunner) {
	if (args.nosync || browserSync.active) {
		return;
	}

	log('Starting BrowserSync on port ' + port);

	// If build: watches the files, builds, and restarts browser-sync.
	// If dev: watches less, compiles it to css, browser-sync handles reload
	if (isDev) {
		gulp.watch([
			config.client + 'app/themes' + THEME_NAME + '/less/**/*.*',
			config.less
		], ['styles'])
			.on('change', changeEvent);
	} else {
		gulp.watch([config.less, config.js, config.html], ['browserSyncReload'])
			.on('change', changeEvent);
	}

	...
	...
	...
}

Please specify which version of generator-hottowel, node and npm you're running

• generator-hottowel (0.0.11)
• Node (8.9.4)
• Npm (5.5.1)

Affected platforms

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

Which gulp command are you running ?

{gulp serve-dev}