Auto reload in browsersync not working

Question

I tried many variant of code but the home.html load only once and it does not reload automatically when I change Style.css file in css folder. I tried this

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload() 
gulp.task('serve', function () {

      browserSync.init({
        server: {

          baseDir: "./",
     index: "./main/home.html"
        },
    });
    gulp.watch("/css/Style.css", [reload])

});

And

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload("./main/home.html")
gulp.task('serve', function () {

      browserSync.init({
        server: {

          baseDir: "./",
     index: "./main/home.html"
        },
    });
    gulp.watch("/css/Style.css", [reload])

});

And

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('serve', function () {

      browserSync.init({
        server: {

          baseDir: "./",
     index: "./main/home.html"
        },
    });
    gulp.watch("./css/Style.css").on("change", browserSync.reload);
});

Any idea please what I am doing wrong?

Answer 1

Change this:

var reload = browserSync.reload() 

to

var reload = browserSync.reload;

and your third version should work with the change below:

gulp.watch("./css/Style.css").on("change", reload);