Browsersync not reloading all pages

Question

Browsersync is just reloading index.html, even though I have my basedir set, and even the specific files listed on the files option.

I have looked on their docu but I have everything as they say, still it only refreshed or syncs index.hrml but about.html for example not.

My structure is this:

-booming-gaes-web
  -dist
  -node_modules
  -src
    -index.html
    -about.html
  -gulpfile.js

So my html files are direclty on my src folder, and the gulp file is in the same folder as the src folder.

My gulp file:

// Include gulp
var gulp = require('gulp');
// Include  Plugins

var browserSync   = require('browser-sync');


// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['js-watch']);
    gulp.watch('src/css/*.scss', ['sass-watch']);
    gulp.watch('src/css/*.css', ['prefix']);
    gulp.watch('src/*.html').on('change', browserSync.reload);
    browserSync({
      files: ['src/index.html','about.html'],
      server:{
        baseDir:'src',
        directory: true
      }
    });
});

Any ideas what im I doing wrong ? thanks!

Answer 1

I just found out...

My about page didnt had a body tag, browsersync needs it to have a body tag in order to work.

From their help:

99% of the time, it's because your web page doesn't have a body tag. In order for Browsersync to connect properly the body tag must be present in your website (we add a script tag just after it).