Gulp：使用 BrowserSync 实现浏览器自动同步

浏览器自动刷新，是为了能在修改完必要的web文件后，浏览器能及时同步这些改动，避免手动刷新的麻烦。在这个项目中浏览器自动刷新使用 browser-sync 来完成。

配置

安装 browser-sync：

npm i -D browser-sync

在 gulpfile.js 中导入 browser-sync ，然后将 browser-sync 作为 watch change 事件的回调即可。

task("build:ts", () => {
  return src("src/js/*.ts")
    .pipe(tsproj())
    .pipe(babel({
      presets: ["@babel/env"]
    }))
    .pipe(uglify())
    .pipe(rename({ extname: ".min.js" }))
    .pipe(dest("build/js"))
});

gulp.task('watch:js', series("build:ts"), browserSync.reload);

gulp.task('server', series("build:ts"), function () {
  browserSync({
    server: {
      baseDir: "./"
    }
  });
  gulp.watch("src/js/*.ts", ['watch:js']);
});

exports.default = series("server");

亦或者使用手动重载：

...
const browserSync = require("browser-sync").create();

/**
 * 浏览器同步
 */
task("browser:sync", () => {
  browserSync.init({
    server: {
      baseDir: "build"
    }
  });
  // 监听文件变化
  watch("src/**/*", series("build:css", "build:ts", "copy:html")).on("change", browserSync.reload);
});

watch 监听 src 目录下所有文件的改动，当文件改动后，会依次执行 build:css 和 build:ts 任务。当 change 事件发生后，使用 browserSync 对象的 reload 方法重载浏览器，实现自动同步。