BrowserSync с Gulp перезагружает браузер до завершения изменений

Question

Некоторое время у меня очень странная проблема с Gulp и BrowserSync. Каждый раз, когда я изменяю CSS (иногда даже HTML), я осознавал, что Gulp обновляет браузер, даже когда я не сохранил и не завершил изменения, что приводит к ошибкам консоли, каждый раз, когда я изменяю специально мои CSS-файлы, но также и HTML, я работал какое-то время с этой конфигурацией gulp.js, но постепенно она достигла точки, где невозможно бегло работать.

Также время от времени, но часто, но я получаю ошибки импорта SASS, когда я правильно импортирую все в мой файл style.scss.

Может быть, способ, которым я использую / вызываю BrowserSync, связан с моментом, когда я вызываю функции наблюдения? или это просто ошибка, связанная с версией Gulp, которую я использую. Любая помощь будет по достоинству оценена.

Вот мой текущий файл gulp.js:

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']);
});