gulp 4.0 使用browser-sync 实时重载只能一次？照着官方文档和网上的弄都不行啊

Question

官方文档地址 https://www.gulpjs.com.cn/doc...
我的代码如下 。 最简单的引用一个css ，启动服务后，修改css中body的颜色。 能够热更新一次，之后再改其他颜色就没用了。

gulp.task('serve', function() {
    browserSync({
      server: {
        baseDir: 'src'
      }
    });
    // gulp.watch('./src/**/*.scss',()=>{
    //     console.log(22)
    //     gulp.src("./src/**/*.scss").pipe(sass()).pipe(gulp.dest("./src")).pipe(reload({
    //         stream:true
    //     }))
    // });
    gulp.watch('./src/**/*.css', ()=>{
        console.log(3)
        reload()
    });
  });
gulp.task("ss",gulp.series("serve"))

去掉了sass的内容，只监听css，还是不行，效果一样，都只能热更新一次，之后再改就没用了。

在命令行使用 gulp ss 或者 gulp serve 启动。 如下 ， 打印的3，也只能打印1次，只能起一次作用，之后再改就没用了

          >gulp serve
[22:06:53] Using gulpfile F:\ty\1\gulpfile.js
[22:06:53] Starting 'serve'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.112:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: src
[22:07:01] Starting '<anonymous>'...
3
[Browsersync] Reloading Browsers...

Answer 1

用下面这个语句试试看

const browserSync = require('browser-sync').create()

async function serve() {
  await browserSync.init(
    {
      server: {
        baseDir: './src',
      },
      files: ['src/**/*.css'], // 这里填写监听的文件列表
    },
    function() {
      console.log('browser refreshed')
    },
  )
}

exports.default = serve

Answer 2

照着 browser sync官网的写法可以实现。 http://www.browsersync.cn/doc...
最大区别是，watch监听html发生变化时进行reload 。 还是奇怪，为何监听css变化时reload不行？

gulp.task('sass', function() {
    return gulp.src("src/css/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(reload({stream: true}));
});

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

    browserSync.init({
        server: "./src"
    });

    gulp.watch("src/css/*.scss", gulp.series('sass'));
    gulp.watch("src/*.html").on('change', reload);
});