首页 > 文章 > 前端

Linux下dmenu快速启动HTML/CSS预览终端

时间：2025-12-05 23:40:41 306浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想要在Linux下快速启动HTML/CSS实时预览终端？本文教你如何利用dmenu打造一个轻量级的前端开发环境。通过dmenu选择“HTML Preview”，触发脚本启动Python服务器并在8000端口预览~/projects/html-preview中的文件，同时自动打开浏览器，并支持热重载，实现快速编辑与实时刷新。无需笨重的IDE，只需dmenu、shell脚本和极简本地服务器，即可实现“一键预览”效果。本文详细介绍了所需工具、脚本编写、dmenu配置，以及如何通过browser-refresh或live-server增强体验，实现真正的极简前端调试。

选择“HTML Preview”后，dmenu触发脚本启动Python服务器并在8000端口预览~/projects/html-preview中的文件，自动打开浏览器并支持热重载，实现快速编辑与实时刷新。

Linux dmenu快速启动HTML+CSS实时预览终端

想要通过 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 实时预览服务
<p>PROJECT_DIR="$HOME/projects/html-preview"
PORT=8000</p><p>if [ ! -d "$PROJECT_DIR" ]; then
mkdir -p "$PROJECT_DIR"
echo "<html><body><h1>Hello</h1><p>Edit index.html here.</p></body></html>" > "$PROJECT_DIR/index.html"
fi</p><p>cd "$PROJECT_DIR"</p><h1>使用 Python 启动服务器，并用 browser-refresh 实现自动刷新</h1><p>if command -v browser-refresh > /dev/null; then
exec browser-refresh -p $PORT python3 -m http.server $PORT &
else
python3 -m http.server $PORT &
BROWSER_PID=$!
xdg-open "<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXpusdyfq5Zkhc3Ge5nam5a1b4K6eWC3d2mHu3yFmnmyhqK_qrtog3Z4lb6InJSSp62xhph6mq-cm2i0jaCcfbOdorLdtKSCiYSXva6coQ' rel='nofollow'>http://localhost:$PORT</a>" &</p><h1>提示用户按 Enter 停止服务</h1><p>echo "Server running on <a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXpusdyfq5Zkhc3Ge5nam5a1b4K6eWC3d2mHu3yFmnmyhqK_qrtog3Z4lb6InJSSp62xhph6mq-cm2i0jaCcfbOdorLdtKSCiYSXva6coQ' rel='nofollow'>http://localhost:$PORT</a>. Press Enter to stop."
read
kill $BROWSER_PID
fi</p>

赋予执行权限：

chmod +x ~/bin/start-html-preview

步骤二：将脚本接入 dmenu

在你的 dmenu 启动快捷键脚本中（如通过 sxhkd 触发），加入这个选项：

#!/bin/sh
echo "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 和终端复用，就能构建一个真正轻快的前端实验环境。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。