javascript - BrowserSync 与 Gulp 在更改完成之前重新加载浏览器

Question

有一段时间我对 Gulp 和 BrowserSync 有一个非常奇怪的问题。每次我更改css（有时甚至是HTML）时，我都意识到Gulp会更新浏览器，即使我没有保存也没有完成更改导致控制台错误每次我特别更改我的CSS文件以及HTML时，我一直在工作使用这个 gulp.js 配置已经有一段时间了，但它慢慢地到了无法流畅工作的地步。

同样时不时地但经常发生，当我在我的 style.scss 文件中正确导入所有内容时，我会遇到 SASS 导入错误。

也许我使用/调用 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']);
});

标签： javascriptgulpgulp-watchgulp-sassgulp-browser-sync