browser sync reloading injecting works, but reloads after - node.js

Question

it seems there is something im missing - Im just trying to get the css injection working on this project.
The server proxy works
The file watcher too
The injection works,
but the page always reloads half a second after...
Im on Mac osx 10.11.6 (15G1108)
Node v4.1.1
here is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var src = {
scss: 'assets/scss/**',
css: 'assets/css/',
html: 'app/*.html'
};
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "intouch.local",
open: false,
reloadOnRestart: false,
injectChanges: true,
});
gulp.watch(src.scss, ['sass']);
});
gulp.task('sass', function() {
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: <%= error.message %>",
sound: "Beep"
})(err);
this.emit('end');
};
return gulp.src(src.scss)
.pipe(plumber({errorHandler: onError}))
.pipe(sass())
.pipe(gulp.dest(src.css))
// NOTE: i've tried with all of these lines, all do the same...
// .pipe(reload({stream: true}))
// .pipe(browserSync.stream())
.pipe(browserSync.reload({
stream: true
}))
.pipe(notify({
title: 'Gulp',
subtitle: 'success',
message: 'Sass task',
sound: "Pop"
}));
});
gulp.task('default', ['serve']);

Answer 1

Adjust the glob for the sass files you want to compile to only match .scss (or .sass) files:
e.g. in your code example change assets/scss/** to assets/scss/**/*.scss.
A broad glob can result in unexpected files (typically source maps) being passed down the pipeline and Browsersync's default behaviour when it encounters modified files that can't be streamed is to reload the page, hence you get a successful injection for the CSS and then a hard reload for some files you probably didn't expect / don't care about.