browser-sync - 在浏览器同步中自动重新加载不起作用

Question

我尝试了许多代码变体，但 home.html 只加载一次，当我更改 css 文件夹中的 Style.css 文件时，它不会自动重新加载。我试过这个

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])

});

和

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])

});

和

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

任何想法请我做错了什么？

Answer 1

改变这个：

var reload = browserSync.reload() 

至

var reload = browserSync.reload;

并且您的第三个版本应该适用于以下更改：

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