BrowserSync with Gulp reloading browser before changes are complete

Question

For a while now i have a very strange problem with Gulp and BrowserSync. Everytime i change the css (sometimes even the HTML) i realized that Gulp updates the browser even when i have not saved neither finished the changes resulting in console errors everytime i'm changing specially my CSS files but also the HTML, i have been working for a while now with this gulp.js configuration but it have slowly come to a point where is impossible to work fluently.

Also every now and then but frequently tho, im getting SASS importing errors when i'm importing everything correctly on my style.scss file.

Maybe is the way im using / calling BrowserSync related to the moment im calling the watching functions ? or is it just a bug related to the version of Gulp i'm using. Any help will be really appreciated.

Here's my current gulp.js file:

var banner = [
  '/*!\n' +
  ' * <%= package.name %>\n' +
  ' * <%= package.title %>\n' +
  ' * <%= package.url %>\n' +
  ' * @author <%= package.author %>\n' +
  ' * @version <%= package.version %>\n' +
  ' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' +
  ' */',
  '\n'
].join('');
var config = {
  bowerDir: './bower_components'
};
gulp.task('bower', function () {
  return gulp.src(mainBowerFiles('**/*.png', {includeDev:true}), { base: config.bowerDir } )
  .pipe(bowerNormalize({ bowerJson: './bower.json'  }))
  .pipe(gulp.dest('app/assets/img'));
});
gulp.task('icons', function() {
    return gulp.src(config.bowerDir+'/font-awesome/fonts/**.*')
    .pipe(gulp.dest('app/assets/fonts'));
});
gulp.task('add-components', function() {
  return gulp.src([
    config.bowerDir+'/modernizr/bin/modernizr.js',
    config.bowerDir+'/jquery/dist/jquery.min.js',
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/button.js',
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/transition.js',         
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/carousel.js',
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
  ])
  .pipe(concat('app.js'))    
  .pipe(gulp.dest('app/assets/js'));    
});
gulp.task('css', function () {
  var processors = [ autoprefixer, cssnext, precss, atImport, mqpacker, cssnano, fontmagician ];    
  return gulp.src('src/scss/style.scss')
  .pipe(sass({
    style: 'compressed',
    includePaths: [
      config.bowerDir + '/font-awesome/scss',
      config.bowerDir + '/bootstrap-sass/assets/stylesheets',
    ]  
  }))
  .pipe(postcss(processors))
  .pipe(gulp.dest('app/assets/css'))
  .pipe(cleanCSS())
  .pipe(rename({ suffix: '.min' }))
  .pipe(header(banner, { package : package }))
  .pipe(gulp.dest('app/assets/css'))
  .pipe(browserSync.reload({stream:true}));
});
gulp.task('js',function(){
  return gulp.src('src/js/scripts.js')
  .pipe(jshint('.jshintrc'))
  .pipe(jshint.reporter('default'))
  .pipe(header(banner, { package : package }))
  .pipe(gulp.dest('app/assets/js'))
  .pipe(uglify())
  .pipe(header(banner, { package : package }))
  .pipe(rename({ suffix: '.min' }))
  .pipe(gulp.dest('app/assets/js'))
  .pipe(browserSync.reload({stream:true, once: true}));
});
gulp.task('browser-sync', function() {
    browserSync.init(null, {
        server: {
            baseDir: "app"
        }
    });
});
gulp.task('bs-reload', function () {
    browserSync.reload();
});
gulp.task('default', ['bower','add-components','css','js', 'icons', 'browser-sync'], function () {
    gulp.watch("src/scss/*/*.scss", ['css']);
    gulp.watch("src/js/*.js", ['js']);
    gulp.watch("app/*.html", ['bs-reload']);
});