运行 browserSync 的多个实例

Question

Browsersync 仅检测 index.html 并且自动刷新只能应用于此文件。但是我怎样才能将 browsersync 用于 about.html 或 cmets.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 都会重新加载。

这也应该重构，但必须等待。