Gulp Browsersync 导致每次文件更改时多次重新加载

Question

我在 Gulp 中使用 browsersync，在特定文件更改上运行一些任务。每当我保存文件时，我的终端中都会收到 10+ [BS] Reloading Browsers... 并且性能滞后是可以理解的。

这是我的 gulpfile：

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

我在这里做错了什么？

Answer 1

Chokidar 中的 awaitWriteFinish 选项为我修复了它。

例子：

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

Answer 2

仅使用 browserSync.stream（然后替换 browserSync.reload）并像这样传递选项 once: true

browserSync.stream({once: true})

这应该可以正常工作。