如何使用browser-sync与Gulp实现HTML、CSS修改后页面自动刷新

• 你之前添加*.css不生效的核心原因是路径匹配规则错误：*.css仅匹配gulpfile所在根目录的CSS文件，你的CSS存放在css子文件夹下，需要匹配子目录内的文件。
• 推荐同时使用CSS流注入能力，无需整页刷新即可更新样式，比直接调用reload体验更好。

完整配置替换参考 #

将你原有的监听代码：
gulp.watch("*.html").on("change", reload);
替换为以下内容：

// 监听根目录HTML文件，修改后整页刷新
gulp.watch("*.html").on("change", reload);
// 监听css目录下所有层级的CSS文件，修改后流式注入样式
gulp.watch("css/**/*.css").on("change", function() {
  return gulp.src("css/**/*.css")
    .pipe(reload({ stream: true }));
});

路径说明：css/**/*.css为递归匹配规则，会匹配css文件夹下包括所有子文件夹内的全部CSS文件，如果你不需要匹配子文件夹，可改为css/*.css。

异常排查点 #

• 配置修改后必须重启Gulp服务才会生效，不要直接修改后就测试
• 如果你使用了Sass/Less等CSS预处理器，需要先监听预处理器源文件完成编译，再监听编译后输出的CSS文件执行注入，直接监听未编译的源文件不会生效
• 确认BrowserSync初始化时的静态根目录/代理路径配置正确，页面引入的CSS路径和本地文件路径匹配

内容的提问来源于stack exchange，提问作者Kasador