Gulp Browsersync khiến nhiều lần tải lại với mỗi filechange

Question

Tôi đang sử dụng browserync với Gulp, chạy một số tác vụ trên các filechang cụ thể. Bất cứ khi nào tôi lưu một tập tin, tôi nhận được 10+ [BS] Reloading Browsers... trong thiết bị đầu cuối và hiệu suất của tôi là dễ hiểu laggy.

Dưới đây là gulpfile tôi:

gulp.task('bowerJS', function() { 
    gulp.src(lib.ext('js').files) 
    .pipe(concat('lib.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('app/assets/js')); 
}); 

gulp.task('bowerCSS', function() { 
    gulp.src(lib.ext('css').files) 
    .pipe(concat('lib.min.css')) 
    .pipe(gulp.dest('app/assets/css/')); 
}); 


// Compile sass into CSS & auto-inject into browsers 
gulp.task('less', function() { 
    gulp.src('./app/css/*.less') 
     .pipe(less()) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('app/assets/css')) 
     .pipe(browserSync.stream()); 
}); 

// Render Jade templates as HTML files 

gulp.task('templates', function() { 
    gulp.src('views/**/*.jade') 
    .pipe(jade({ 
     pretty: true 
    })) 
    .pipe(gulp.dest('app/src/')) 
}); 

gulp.task('php', function() { 
    php.server({ base: 'app', port: 8123, keepalive: true}); 
}); 
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', 'php'], function() { 


    var proxyOptions1 = url.parse('http://some-site:1234'); 
     proxyOptions1.route = '/api/hi'; 

    browserSync({ 
     port: 8999, 
     proxy: '127.0.0.1:8123', 
     middleware: [ 
       proxy(proxyOptions1), 
       history() 
     ], 
     notify: false 
    }); 


    gulp.watch("app/assets/css/*.less", ['less']); 
    gulp.watch("app/**/*.html").on('change', browserSync.reload); 
    gulp.watch("app/assets/js/*.js").on('change', browserSync.reload); 
    gulp.watch("views/**/*.jade", ['templates']); 
}); 

Tôi đang làm gì sai ở đây? chỉ browserSync.stream

Answer 1

sử dụng (thay thế browserSync.reload sau đó) và thông qua tùy chọn once: true như thế này

browserSync.stream({once: true}) 

nên này hoạt động tốt.

Answer 2

Tùy chọn awaitWriteFinish ở Chokidar đã sửa nó cho tôi.

Ví dụ:

browserSync.init({ 
    server: dist.pages, 
    files: dist.css + '*.css', 
    watchOptions: { 
     awaitWriteFinish : true 
    } 
});