Question

Browsersync仅检测index.html，并且自动刷新只能应用于此文件。但是我如何对about.html或comments.html等页面使用browsersync？

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。

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

运行browserSync的多个实例

1 个答案: