在Fedora这类Linux发行版中,内核提供了inotify接口用于监控文件系统事件。前端开发者常需要在修改CSS后让浏览器中的HTML页面自动刷新,借助inotifywait命令可以轻松监听CSS文件写入,从而向页面发送重载信号。

安装inotify工具
Fedora默认可能未安装inotify-tools,使用以下命令安装:
sudo dnf install inotify-tools
编写监控脚本
假设项目目录为 /home/user/site,其中HTML引用了同目录的style.css。我们希望style.css被修改后自动刷新页面。可以用inotifywait配合curl通知本地服务,或直接用脚本重启浏览器标签。
基础Shell脚本示例
#!/bin/bash # 监控目录中的CSS文件改动 DIR="/home/user/site" inotifywait -m -e close_write -e move_self "$DIR"/*.css | while read file event do echo "检测到CSS变化: $file" # 通过向本地HTTP服务发送信号触发刷新 curl -s http://127.0.0.1:8080/reload > /dev/null done
HTML端接收重载信号
若使用简单的本地HTTP服务,可在HTML中通过JavaScript轮询或WebSocket接收刷新指令。下面是一段轻量WebSocket客户端代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动重载示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS自动重载演示</h1>
<script>
// 连接本地WebSocket服务
var ws = new WebSocket('ws://127.0.0.1:8080/ws');
ws.onmessage = function() {
// 收到消息后重载页面
location.reload();
};
</script>
</body>
</html>
注意事项
- inotify监控有数量限制,可在
/proc/sys/fs/inotify/max_user_watches查看和调整。 - 若使用 Firefox 或 Chrome 的自动刷新插件,也可将inotify作为外部触发源。
- 脚本中路径请勿包含未转义的特殊字符,避免Shell解析错误。
小结
在Fedora上利用inotify监控CSS变化并自动重载HTML,是一种零依赖的高效方案。只需少量Shell与前端代码,即可显著改善本地开发体验。
inotifyFedoraCSS_auto_reload修改时间:2026-07-29 03:39:08