解释 grunt-contrib-watch 内置 livereload 与浏览器插件通信流程 - 问题详情 - 创脉思

解读

面试官想确认你是否真正“跑通过”这套本地开发链路，而不仅停留在“配过 grunt-contrib-watch”层面。国内主流场景是：

前端同学本地起 Grunt 服务，边写边刷新；
后端模板或 Node 服务端口固定，livereload 必须无缝注入；
浏览器端需要装插件或手动插脚本，端口冲突、HTTPS、公司代理常踩坑。
因此，你要把“文件变化 → Grunt 任务 → 触发 livereload → 浏览器刷新”这一整条数据流讲清楚，并点出国内常见坑位与定位方法，才能体现“资深”。

grunt-contrib-watch 的 livereload 选项：可布尔值、也可数字端口；为数字时启动内置 tiny-lr 服务。
tiny-lr 实现的是 LR 协议 v7，基于 HTTP/1.1 的 text/event-stream（SSE）推送。
浏览器端脚本（livereload.js）职责：
- 与 tiny-lr 建立 SSE 长连接；
- 收到 reload 事件后，按类型执行 location.reload() / CSS 热替换 / 图片热替换。
注入方式：
- 插件自动在本地 HTML 尾部注入 <script src="//localhost:35729/livereload.js">；
- 若后端模板渲染，需手动插或借助 connect-livereload 中间件；
- 公司代理下需把 localhost 加入 PAC 直连列表，否则 35729 被墙。
端口复用与冲突：
- 多人共用开发机时，35729 被占用需手动改端口；
- 若项目启 HTTPS，需把 tiny-lr 也升到 https 并信任自签证书，否则浏览器阻断混合内容。
调试技巧：
- 浏览器 Network 面板看 eventsource 连接是否 200；
- Grunt 加 --verbose 观察 tiny-lr 是否触发 “changed / reload” 日志；
- 若 SSE 断连，优先排查 公司安全软件劫持 35729。

grunt-contrib-watch 启动时，若给 livereload: true 或 livereload: 35729，会在本机启动一个 tiny-lr 服务，默认监听 35729 端口。

当监控文件发生 add / change / delete，watch 任务执行完用户定义的后续任务（如 sass、babel、copy 等）后，调用 tiny-lr 的 reload 接口，向其推送一条 JSON 事件：
{command: 'reload', path: 'xxx.css', liveCSS: true}。
tiny-lr 把该事件通过 SSE 通道转发给所有已连接的浏览器客户端。
浏览器端运行的 livereload.js 维持一条 EventSource 长连接，收到事件后：
- 若是 CSS 且路径匹配，走 link.href 加时间戳热替换；
- 若是 HTML/JS/图片，执行 location.reload() 整页刷新。
通信链路：
文件系统 → grunt-contrib-watch → tiny-lr (35729) → EventSource → livereload.js → 浏览器刷新。
若项目页面与 tiny-lr 不在同一端口，需先注入脚本：
- 本地静态 HTML 由 grunt-contrib-watch 自动插；
- 后端模板需手动加 <script src="//localhost:35729/livereload.js"></script>，或在 Node 层用 connect-livereload 中间件自动插。
国内常见卡点：
- 公司代理把 localhost 请求转发到上游，导致 35729 连不上 → 把 localhost、127.0.0.1 加入 代理例外；
- 多人开发机端口冲突 → 在 Gruntfile 里显式写 livereload: 35730 并同步改脚本端口；
- HTTPS 页面加载 http://livereload.js 被浏览器阻断 → 启动 tiny-lr 的 https 模式，并在本地信任证书。

如果项目切到 Vite / Webpack5 HMR，livereload 这种“整页刷新”显得原始，但它在 老项目、静态页、多页应用 中仍是最低成本方案；
微前端场景下，子应用独立端口，主应用通过 Nginx 代理 35729 时，需把 livereload 脚本域名写成 //主域名/livereload 并配好 SSE 的 CORS 头；
在 云开发机 / 云容器 里，35729 需映射到公网，建议加 basic-auth 或 VPN 隧道，否则 SSE 长连接易被网关断开；
可以手写一个 Grunt 插件 把 tiny-lr 换成 WebSocket 实现，降低公司防火墙对 SSE 的误判，同时支持 自定义热更新粒度（例如只替换 Vue 组件的 render 函数）。