Running multiple instances of browserSync

Question

Browsersync detects only index.html and auto refresh can be applied only to this file. But how can I use browsersync for pages like about.html or comments.html etc. ???

Answer 1

If those pages are not linked to from your index.html but are in the same directory you can start browserSync at the folder level with: server directory options.

// Serve files from the app directory with directory listing

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

and then open each in a new tab if you want them all open at the same time.

If you want to open multiple web pages at once when starting your gulp task you would have to start multiple instances of browserSync each with its own index:

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

Here is how to start multiple instances of 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();
}

And you will need something like:

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

which could be refactored into a single function call that does both. And also any reload calls would needed to be replicated like:

    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 }));
    }

so that both index.html and about.html's css are reloaded.

Which should also be refactored but that will have to wait.