Linux Fedora用inotify监控，CSS变HTML自动重载！

使用inotifywait监控CSS文件修改事件；2. 通过shell脚本结合Chrome远程调试接口触发页面刷新；3. 或临时使用live-server实现自动重载，提升开发效率。

如果您在使用Linux Fedora进行Web开发时，希望实现CSS文件修改后自动触发HTML页面重载，可以通过inotify机制监控文件变化并执行刷新操作。以下是具体实现方式：

一、使用inotifywait监控文件变化

inotifywait是inotify-tools工具包中的命令行工具，能够监听指定目录或文件的变更事件，如修改、创建或删除。通过它可检测CSS文件是否被保存。

1、确保已安装inotify-tools：sudo dnf install inotify-tools

2、运行inotifywait命令监控CSS文件所在目录：inotifywait -m -e modify --format '%f' /path/to/css/directory

立即学习“前端免费学习笔记（深入）”；

3、当检测到CSS文件被修改时，该命令会输出文件名，后续可结合脚本触发重载动作。

二、结合shell脚本触发浏览器刷新

通过shell脚本捕获inotifywait的输出，并调用外部工具向浏览器发送刷新指令。需借助支持远程调试的浏览器（如Chrome）和curl工具。

1、启动Chrome时启用远程调试端口：google-chrome --remote-debugging-port=9222

零一万物开放平台

零一万物大模型开放平台

36

查看详情

2、编写循环脚本持续监听文件变化并请求刷新：

while inotifywait -e modify /path/to/style.css; do curl -s "http://localhost:9222/json" | grep -o '"url":"[^"]*"' | cut -d'"' -f4 | xargs -I {} curl -X POST {} -d '{"command":"reload"}'; done

3、将上述脚本保存为auto-reload.sh并赋予执行权限：chmod +x auto-reload.sh

三、利用第三方Node.js轻量替代方案模拟热重载

虽然目标是在Fedora上原生实现，但可临时使用Node.js工具如live-server提供快速反馈循环，辅助开发流程。

1、全局安装live-server：npm install -g live-server

2、进入项目根目录并启动服务：live-server --port=8000

3、访问http://localhost:8000，任意更改CSS文件后，页面将自动重载。

以上就是Linux Fedora用inotify监控，CSS变HTML自动重载！的详细内容，更多请关注php中文网其它相关文章！