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

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

此外，偶尔但经常会有这样的情况：当我正确导入style.scss文件中的所有内容时，我会收到SASS导入错误

也许我使用/调用BrowserSync的方式与我调用监视功能的那一刻有关？或者它只是一个与我正在使用的Gulp版本相关的bug。任何帮助都将不胜感激

以下是我当前的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']);
});

var横幅=[
“/*！\n”+
“*\n”+
“*\n”+
“*\n”+
“*@author\n”+
“*@version\n”+
“*版权”+新日期（）.getFullYear（）+”.已授权。\n”+
' */',
“\n”
].加入（“”）；
变量配置={
bowerDir:“./bower\u组件”
};
吞咽任务（'bower'，函数（）{
return gulp.src（mainBowerFiles（'***.png'，{includeDev:true}），{base:config.bowerDir}）
.pipe（bowerNormalize（{bowerJson:'./bower.json'}））
.管道（吞咽目的地（“应用程序/资产/img”）；
});
吞咽任务（'icons'，function（））{
return gulp.src（config.bowerDir+'/font-awesome/font/**.'）
.pipe（gulp.dest（'app/assets/font'））；
});
gulp.task（'add-components'，function（））{
回灌([
config.bowerDir+'/modernizer/bin/modernizer.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（吞咽目的地（“app/assets/js”）；
});
吞咽任务（'css'，函数（）{
var处理器=[autoprefixer、cssnext、precss、atImport、mqpacker、cssnano、Font魔术师]；
return gulp.src（'src/scss/style.scss'）
.管道（sass）({
样式：“压缩”，
包括道路：[
config.bowerDir+'/font/scss'，
config.bowerDir+'/bootstrap sass/assets/stylesheets'，
]  
}))
.管道（邮政编码（处理器））
.pipe（吞咽目标（'app/assets/css'））
.pipe（cleanCSS（））
.pipe（重命名（{后缀：'.min'}））
.pipe（标题，{package:package}））
.pipe（吞咽目标（'app/assets/css'））
.pipe（browserSync.reload（{stream:true}））；
});
gulp.task（'js'，function（）{
返回gulp.src（'src/js/scripts.js'）
.pipe（jshint（'.jshintrc'））
.pipe（jshint.reporter（'default'））
.pipe（标题，{package:package}））
.pipe（吞咽目标（'app/assets/js'））
.管道（丑（）
.pipe（标题，{package:package}））
.pipe（重命名（{后缀：'.min'}））
.pipe（吞咽目标（'app/assets/js'））
.pipe（browserSync.reload（{stream:true，once:true}））；
});
gulp.task（'browser-sync'，function（））{
browserSync.init（空{
服务器：{
baseDir：“应用程序”
}
});
});
吞咽任务（'bs-reload'，函数（）{
重新加载（）；
});
gulp.task（'default'、['bower'、'add-components'、'css'、'js'、'icons'、'browser sync']，函数（）{
大口喝手表（“src/scss/*/*.scss”，['css']）；
gulp.watch（“src/js/*.js”，['js']）；
gulp.watch（“app/*.html，['bs-reload']）；
});

您的一些问题，如gulp watch被触发，即使您没有手动保存页面，也可能是由于您的编码环境设置为autosave。抱歉@Mark我不明白您的意思，当您说“autosave”时，这意味着我的代码中有一个参数或允许该参数的东西？你能显影吗，谢谢！您正在使用哪个代码编辑器？它可能启用了自动保存功能，以便在键入时自动保存文件（或每分钟保存一次或任何设置）。这个自动保存会触发你的手表任务。我使用升华文本和视觉代码，在你的建议之前，我没有意识到我只是在VC上有问题，当我检查自动保存选项时，它们在短时间延迟后被设置为自动保存。关闭自动保存后，一切正常。谢谢你，伙计！