Browser sync isn't serving the root files

Question

Browser sync isn't serving the root files using gulp.

this is my code:

 gulp.task("liveReload", [
  "copy", "watch"
], function () {

  browserSync.init(null,{
    server: {
      baseDir: ["public"]
    },
    files: ["*"],
    port: 8080
  });
  gulp.watch("src/index.html").on("change",browserSync.reload);
  gulp.watch("src/**/*.html").on("change",browserSync.reload);
  gulp.watch(paths.srcJS, browserSync.reload);
});

I tried to play with the browser sync options and nothings works. it's only serving the subFolder files.

Is pointing the index.html but isn't serving it. which mean no liveReload occurred while changing to index.html

Answer 1

[too much for a comment]:

gulp.watch("src/index.html").on("change",browserSync.reload);
gulp.watch("src/**/*.html").on("change",browserSync.reload);

are redundant (since the globstar ** matches 0 or more directories - here you apparently have 0 directories between src and index.html). The first watch is included in the second so maybe browserSync is getting confused. Try removing the first, leaving only

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

and see if that helps. ** globstar docs.

Also try:

baseDir: "public"

or

baseDir: "./public"

instead of

baseDir: ["public"]

Answer 2

Hello it wasn't bowser sync issue. the index.html was added after the browser sync serving. That why I gonna close this question. Thanks.