Sublime Text快速集成Web服务器热重载

夏雪大大_5855

夏雪大大_5855

2026-10-28

893人浏览

原创

LiveReload CLI 必须全局安装并运行,Sublime插件仅触发通知;浏览器扩展需启用且端口、协议(http://)、文件类型(含css)三者严格一致;Markdown预览依赖SimpleReloadPlugin调用markdown_preview命令。

sublime text快速集成web服务器热重载

LiveReload CLI 必须先跑起来,否则插件只是个摆设

Sublime Text 自身不提供 WebSocket 服务,LiveReload 插件(如 dwieeb 版)在 ST4 上已静默失效,ST3 上也仅是“保存时发通知”的监听器——它不建连接、不广播变更、不监听文件。真正干活的是 Node.js 实现的 livereload CLI 工具。

必须执行:

  • npm install -g livereload
  • 在项目根目录运行:livereload . --port 35729 --exts html,css,js,md
  • --exts 必须显式包含 css,否则改样式不会触发刷新
  • 若提示 EADDRINUSE,换端口(如 --port 35730),并同步更新浏览器扩展的 Options 设置

浏览器扩展只认 http://,file:// 协议下直接失效

Chrome / Edge 必须安装官方 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),其他同名插件大多无效。安装后需手动点击地址栏旁图标,使其变为实心状态,并确认右下角显示 LiveReload is connected。

硬性限制:

  • 页面必须通过 http://localhost:8000/xxx.html 这类地址打开,file:// 协议下扩展会被浏览器直接禁用
  • 若页面已在浏览器中打开后再装扩展,需手动按 Ctrl+R 重载一次,让注入脚本生效
  • 扩展设置里要勾选 Allow access to file URLs(仅对本地调试必要,但非充分条件)

SublimeServer 和 LiveReload 不是一回事,别混用

SublimeServer 是纯静态 HTTP 服务器,启动后把当前项目映射为 http://localhost:8080/,适合快速预览 HTML/CSS/JS,但它不监听文件变化,也不触发自动刷新。

而 LiveReload 的核心价值是「保存即刷新」:它依赖 CLI 建立 WebSocket,靠浏览器扩展注入脚本监听变更。两者目标不同:

Sublime Text Build Linux版
Sublime Text Build Linux版

Sublime Text Linux x86-64 deb 安装包。官方也提供 rpm、tar.xz 和软件源安装方式。

下载
  • 需要静态服务 + 手动刷新 → 用 SublimeServer(右键 → View in SublimeServer)
  • 需要保存后秒级自动刷新 → 必须配 livereload CLI + 浏览器扩展
  • 想同时满足?开两个终端:一个跑 livereload,一个跑 python -m http.server 8000 或 SublimeServer,但后者不参与热重载链路

Markdown 预览要绕过默认逻辑,靠 SimpleReloadPlugin

livereload CLI 默认不处理 .md 文件,因为 Markdown 不是可直接渲染的 HTML。真正起作用的是 Markdown Preview 插件把内容转成临时 HTML 后,再由 SimpleReloadPlugin 触发刷新。

配置路径:Preferences → Package Settings → LiveReload → Settings – User,填入:

{
  "enabled_plugins": ["SimpleReloadPlugin"],
  "SimpleReloadPlugin": {
    "paths": ["*.md"],
    "command": "markdown_preview",
    "args": {
      "target": "browser",
      "parser": "markdown"
    }
  }
}

注意:"command" 必须是 markdown_preview(全小写 + 下划线),写成 MarkdownPreview 或 markdownPreview 都无效。

最容易被忽略的点:所有环节的协议、端口、文件扩展名、插件启用状态必须全部对齐。少一个,热重载就断在某一层——不是插件没装,而是链路里某个齿轮没咬合上。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
服务器是什么
服务器是什么

服务器是一种计算机硬件设备或软件程序,它具有强大的计算和存储能力,用请求、存储数据和提供服务。它在互联网中着关重要的作用,为用户提供各种服务和资源。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.15

457

5

连接apple id服务器时出错
连接apple id服务器时出错

连接apple id服务器时出错的原因包括网络连接问题、服务器问题、Apple ID账户问题、设备问题、防火墙或安全软件问题、时间和日期设置问题、Apple服务器维护等。本专题为大家提供apple id相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.08

960

5

搭建互联网服务器
搭建互联网服务器

搭建互联网服务器需要:1、选择合适的硬件和操作系统,第一步是选择合适的硬件和操作系统;2、安装和配置操作系统,是搭建互联网服务器的关键步骤;3、安装和配置服务器软件,是搭建互联网服务器的下一步,常见的服务器软件包括Apache、Nginx、Tomcat等;4、配置防火墙和安全性,是搭建互联网服务器的重要步骤;5、域名解析和配置,是搭建互联网服务器的最后一步。

2023.09.19

3212

5

如何查看服务器状态
如何查看服务器状态

查看服务器状态的方法有使用命令行工具、图形界面工具、监控工具、日志文件和远程管理工具等。本专题为大家提供服务器状态相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.09

1056

5

服务器域名转接慢怎么解决
服务器域名转接慢怎么解决

服务器域名转接慢的解决办法有DNS优化、服务器优化、CDN加速、前端优化和网络优化等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.17

949

5

服务器评测软件
服务器评测软件

服务器评测软件有PassMark Software、CPU-Z、GPU-Z、CrystalDiskMark、IOmeter、JMeter、LoadRunner、Apache Bench等等。详细介绍:1、PassMark Software是一款综合性的服务器性能测试软件,可以评估服务器在各种负载条件下的性能;2、CPU-Z是一款可以提供服务器CPU详细信息的软件等等。

2023.10.17

494

3

如何开启TFTP服务器
如何开启TFTP服务器

开启TFTP服务器的步骤包括选择TFTP服务器软件、下载和安装软件、配置TFTP服务器以及启动和测试服务器等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

2956

4

服务器负载不兼容怎么解决
服务器负载不兼容怎么解决

解决方法:1、增加服务器资源;2、负载均衡;3、优化应用程序;4、增加缓存机制;5、分布式架构;6、限流和熔断;7、自动化扩容。想知道更详细服务器负载不兼容的解决方法,可以访问本专题下面的文章。

2023.10.20

5532

4

宽带如何接入服务器
宽带如何接入服务器

宽带接入服务器的方法有ADSL宽带接入服务器、光纤接入服务器、无线接入服务器和以太网接入服务器等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.20

867

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程