Consider the following code:

function styleIt(){
    let dir = "./SomeDir/"+curProject+"/assets/";

    return gulp.src( dir+"scss/**/*.scss" )
    .pipe( sass().on('error', sass.logError))
    .pipe( sass({ 
            errLogToConsole: true
        })
    ).on('error', function(e){console.log(e)} )

    // auto prefixer
    .pipe( autoprefixer({ browsers: ['last 2 versions', 'ie >= 11', 'android >= 4.4', 'ios >= 7'] }) )
    .pipe( gulp.dest( dir+'css/' ) ).on( 'error', function(e){ log(e) } )

    // stream changes to all browsers .stream()
    .pipe( browserSync.stream() );
}
function watchIt(){
    let dir = "SomeDir/"+curProject+'/assets/';

    browserSync.init({
        plugins: ['bs-console-qrcode'],
        open: false,
        proxy: curProjectUrl,
    
        files: [ dir+'/**' ],
        serveStatic: [ dir+"/" ],
        rewriteRules: [
            {
                match: new RegExp('SomeDir/inject.css'),
                fn: function() {
                    return '/css/'+curProject+'.css';
                }
            }
        ],
        snippetOptions: {
            rule: {
                match: /<\/body>/i,
                fn: function (snippet, match) {
                    return '<script type="text/javascript" src="/js/'+curProject+'.js"></script>' + snippet + match;
                }
            }
        }
    });

    const watcher = gulp.watch( "./SomeDir/"+curProject+"/assets/**/*.scss", styleIt);

    watcher.on('change', function( path, stats) {
        console.log(`File ${path} was changed `+stats);
    });
}
exports.watchIt = watchIt;

As you can see there's not a single mention of the .reload but I do .stream.. still browserSync seems intend on refreshing the page instead of streaming the change. And I can for the life of me not figure out why it ignores the stream and reloads instead. Can anyone see what I have missed?