html - 运行 browserSync 的多个实例

Question

Browsersync 仅检测 index.html 并且自动刷新只能应用于此文件。但是我怎样才能将 browsersync 用于 about.html 或 comments.html 等页面？？？？

Answer 1

如果这些页面未从您的 index.html 链接到但位于同一目录中，您可以在文件夹级别启动 browserSync ： server directory options。

// 使用目录列表服务来自应用程序目录的文件

server: {
    baseDir: "src",
    directory: true
}

如果您希望它们同时打开，然后在新选项卡中打开它们。

如果您想在启动 gulp 任务时一次打开多个网页，则必须启动多个 browserSync 实例，每个实例都有自己的索引：

server: {
      baseDir: "./",
      index: "about.html",
    },

以下是如何启动多个 browserSync 实例：

// the create "string" can be anything useful
var browserSync = require("browser-sync").create("index.html");
var browserSync2 = require("browser-sync").create("about.html");

var reload = browserSync.reload;
var reload2 = browserSync2.reload;

// a function since I am using gulp4.0 but could be a task as well
function serve(done) {
  browserSync.init({
    port: 3000,
    server: {
      baseDir: "./",
      index: "index.html",
    },
    // open: false,
    ghostMode: false
  });
  browserSync2.init({
    // need to increment the port manually it appears
    port: 3003,
   // and must increment the ui port as well
    ui: {
      port: 3004
    },
    server: {
      baseDir: "./",
      index: "about.html",
    },
    // open: false,
    ghostMode: false
  });
  done();
}

你将需要类似的东西：

gulp.watch("./*.html").on("change", reload);
gulp.watch("./*.html").on("change", reload2);

可以将其重构为一个同时执行两者的函数调用。而且还需要复制任何重新加载调用，例如：

    function sass2css() {
      return gulp.src(paths.sass.stylesFile)
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest(paths.css.temp))
        .pipe(reload({ stream:true }))
        .pipe(reload2({ stream:true }));
    }

以便重新加载 index.html 和 about.html 的 css。

这也应该被重构，但这将不得不等待。