任务完成后，Gulp重新加载浏览器

Question

在我的gulp任务中，我希望在任务完成后使用browserSync.reload 重新启动我的浏览器。目前我的gulpfile.js看起来像这样：

gulp.task('serve', ['build'], function () {

    browserSync.init({
        notify: false,
        server: "./" + dist
    });

    gulp.watch("/**/*.html", ['html']).on('change', browserSync.reload);
    gulp.watch("/**/*.md", ['html']).on('change', browserSync.reload);

});

目前gulp做的第一件事是[BS] Reloading Browsers...，然后是[12:54:12] Starting 'html'...。

如何将其更改为首次运行html和结束browserSync.reload？

Answer 1

我认为您不需要on.change侦听器，您可以像这样指定重新加载：

gulp.task('serve', ['build'], function () {

    browserSync.init({
        notify: false,
        server: "./" + dist
    });

    gulp.watch("/**/*.html", ['html', browserSync.reload]);
    gulp.watch("/**/*.md", ['html', browserSync.reload]);

});

修改

正如 Mark 所说，以parrallel运行这两个任务可能会产生一些错误，更好的解决方案可能是：

gulp.task('serve', ['build'], function () {
    browserSync.init({
        notify: false,
        server: "./" + dist
    });

    gulp.watch("/**/*.html", ['reload']);
    gulp.watch("/**/*.md", ['reload']);
});

gulp.task('reload', ['html'], function () {
    browserSync.reload();
});

Answer 2

gulp.task('reload', function (done) {
    browserSync.reload();
    done();
});
 
gulp.task('bs', function() {

    browserSync.init({
        proxy: "http://strona.pl/"
    });

    gulp.watch("./css/*.scss", gulp.series('sass', 'deploy', 'reload'));

    gulp.watch('./**/*.php').on('change', browserSync.reload);
    gulp.watch('./*.php').on('change', browserSync.reload);
});