Gulp and Browsersync injecting CSS but causing a full reload - browser-sync

Question

I am trying to configure Gulp and Browsersync to inject CSS changes without a reload. The attached Gulpfile.js is calling .pipe(browserSync.stream()) after the SASS task. We see it inject, but then calls a full reload.
/**
* Gulpfile
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var notify = require('gulp-notify');
var browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var fs = require("fs");
var exec = require('child_process').exec;
var config = require("./config");
var appDir = 'web'
/**
* If config.js exists, load that config for overriding certain values below.
*/
function loadConfig() {
if (fs.existsSync(__dirname + "/./config.js")) {
config = {};
config = require("./config");
}
return config;
}
loadConfig();
/*
* This task generates CSS from all SCSS files and compresses them down.
*/
gulp.task('sass', function () {
return gulp.src(appDir + '/anonymous/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
noCache: true,
outputStyle: "compressed",
lineNumbers: false,
loadPath: appDir + '/anonymous/css/*',
sourceMap: true
})).on('error', function(error) {
gutil.log(error);
this.emit('end');
})
.pipe(sourcemaps.write(appDir + '/anonymous/maps'))
.pipe(gulp.dest(appDir + '/anonymous/css'))
.pipe(browserSync.stream())
.pipe(notify({
title: "SASS Compiled",
message: "All SASS files have been recompiled to CSS.",
onLast: true
}))
;
});
/**
* Define a task to spawn Browser Sync.
* Options are defaulted, but can be overridden within your config.js file.
*/
gulp.task('browser-sync', function() {
browserSync.init({
port: config.browserSync.port,
proxy: config.browserSync.hostname,
open: config.browserSync.openAutomatically,
injectChanges: config.browserSync.injectChanges
});
});
/**
* Defines the watcher task.
*/
gulp.task('watch', function() {
// watch scss for changes
gulp.watch([
appDir + '/anonymous/scss/**/*.scss',
appDir + '/secure/components/**/*.scss'
], ['sass']);
});
gulp.task('default', [
'sass',
'watch',
'browser-sync'
]);
Here is the config.js that is referenced in the browsersync config.
module.exports = {
browserSync: {
hostname: "http://192.168.50.4:9080/site/secure",
port: 3000,
openAutomatically: true,
reloadDelay: 50,
injectChanges: true,
},
};

Answer 1

I figured out the answer to my own question.
There is a source map being generated and browsersync is watching the sourcemap folder and triggering a full refresh when the sourcemap is regenerated. Removing these lines stops the full refresh on the SASS task.
.pipe(sourcemaps.init())
.pipe(sourcemaps.write(appDir + '/anonymous/maps'))
Reference
https://github.com/BrowserSync/browser-sync/issues/235