选择“HTML Preview”后，dmenu触发脚本启动Python服务器并在8000端口预览~/projects/html-preview中的文件，自动打开浏览器并支持热重载，实现快速编辑与实时刷新。
想要通过 dmenu 快速启动一个能实时预览 HTML + CSS 的轻量级开发环境？可以结合 dmenu、shell 脚本和一个极简的本地服务器来实现快速编辑与预览，无需打开重型 IDE 或浏览器手动刷新。
思路概述
利用 dmenu 选择并触发一个前端预览脚本，该脚本启动一个本地 HTTP 服务（如 Python 的 http.server），自动打开默认浏览器，并监听文件变化后自动刷新页面，实现“一键预览”效果。
所需工具
dmenu：作为图形化快速启动器bash/zsh：编写自动化脚本Python 3：用于启动本地服务器browser-refresh 或 live-server（可选）：实现热重载你的 HTML/CSS 文件目录：例如 ~/projects/html-preview/
步骤一：准备预览脚本
创建一个脚本，比如 ~/bin/start-html-preview：
#!/bin/bash# 启动 HTML+CSS 实时预览服务PROJECT_DIR="$HOME/projects/html-preview"PORT=8000
if [ ! -d "$PROJECT_DIR" ]; thenmkdir -p "$PROJECT_DIR"echo "
Hello
Edit index.html here.
立即学习“前端免费学习笔记（深入）”；
" > "$PROJECT_DIR/index.html"ficd "$PROJECT_DIR"
使用 Python 启动服务器，并用 browser-refresh 实现自动刷新
if command -v browser-refresh > /dev/null; thenexec browser-refresh -p $PORT python3 -m http.server $PORT &elsepython3 -m http.server $PORT &BROWSER_PID=$!xdg-open "https://www.php.cn/link/92df9a438175ad64dbd06312acf13ade" &
提示用户按 Enter 停止服务
echo "Server running on https://www.php.cn/link/92df9a438175ad64dbd06312acf13ade. Press Enter to stop."readkill $BROWSER_PIDfi
赋予执行权限：
chmod +x ~/bin/start-html-preview
步骤二：将脚本接入 dmenu
在你的 dmenu 启动快捷键脚本中（如通过 sxhkd 触发），加入这个选项：
#!/bin/shecho "HTML Preview" | dmenu -l 10 | { read choice case "$choice" in "HTML Preview") exec ~/bin/start-html-preview ;; esac}
按下快捷键后，dmenu 弹出选项，选择 “HTML Preview” 即可启动服务并打开浏览器。
增强体验：支持热重载
安装 node.js 工具 browser-refresh 或 live-server 提升体验：
npm install -g browser-refresh或使用 live-server：更完整，自带自动刷新
替换脚本中的服务启动行为为：
exec live-server --port=8000 "$PROJECT_DIR"
最终效果
按下快捷键 → dmenu 弹出 → 选择预览项 → 自动启动服务 + 打开浏览器 → 编辑 HTML/CSS 文件 → 页面自动刷新。整个流程无需鼠标，适合极简前端调试。
基本上就这些，不复杂但很实用。配合 vim 和终端复用，就能构建一个真正轻快的前端实验环境。
以上就是Linux dmenu快速启动HTML+CSS实时预览终端的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595034.html
微信扫一扫 
支付宝扫一扫 
