live-server -- 热加载利器

live-server是一款具有实时重载功能的小型开发服务器,可一键安装并自动刷新HTML/JavaScript/CSS文件,适合用于开发环境而非生产部署。它简化了本地服务器环境的搭建过程,避免了使用如gulp构建时的复杂配置。

live-server是什么?
这是一个具有实时重载功能的小型开发服务器。用它来热加载你的HTML / JavaScript / CSS文件,但不能用于部署最终的网站。(切图仔,呵呵)

在这里插入图片描述

优点

1:一键安装,实现自动刷新,架设本地服务器环境。
2:比起 gulp 构建 实现自动刷新,架设本地服务器环境,需要安装自动刷新插件gulp-livereload,架设本地服务器插件gulp-server。live-server简直一步到位。只要安装live-server,就可以解决自动刷新和架设本地服务器环境的问题。

安装使用

1、安装nodeJs
2、打开命令行工具,输入命令 npm i live-server -g
3、命令行进入项目文件中,输入命令 live-sever 启动

注意事项
输入命令 live-sever 启动,默认会自动打开浏览器,并且访问8080端口。如何需要端口占用,可以更换端口。可以通过命令 --port=NUMBER修改, 具体操作如下:

live-server --port=8083

其他命令行参数:

*   `--port=NUMBER` - 选择要使用的端口,默认值:PORT env var或8080
*   `--host=ADDRESS` - 选择要绑定的主机地址,默认值:IP env var或0.0.0.0(“任意地址”)
*   `--no-browser` - 禁止自动Web浏览器启动
*   `--browser=BROWSER` - 指定浏览器使用,而不是系统默认
*   `--quiet | -q` - 禁止记录
*   `--verbose | -V` - 更多日志记录(记录所有请求,显示所有侦听的IPv4接口等)
*   `--open=PATH` - 启动浏览器到PATH而不是服务器根目录
*   `--watch=PATH` - 用逗号分隔的路径来专门监视更改(默认值:观看所有内容)
*   `--ignore=PATH`- 要忽略的逗号分隔的路径字符串([anymatch](https://github.com/es128/anymatch) -compatible definition)
*   `--ignorePattern=RGXP`-文件的正则表达式忽略(即`.*\.jade`)(**不推荐使用**赞成`--ignore`)
*   `--middleware=PATH` - 导出.js文件的路径导出中间件功能添加; 可以是一个没有路径的名字,也不是引用`middleware`文件夹中捆绑的中间件的扩展名
*   `--entry-file=PATH` - 提供这个文件(服务器的根相对),以取代丢失的文件(对单页面应用程序有用)
*   `--mount=ROUTE:PATH` - 在定义的路线下提供路径内容(可能有多个定义)
*   `--spa` - 将请求从/ abc转换为/#/ abc(适用于单页面应用程序)
*   `--wait=MILLISECONDS` - (默认100ms)等待所有更改,然后重新加载
*   `--htpasswd=PATH` - 启用期待位于PATH的htpasswd文件的http-auth
*   `--cors` - 为任何来源启用CORS(反映请求源,支持凭证的请求)
*   `--https=PATH` - 到HTTPS配置模块的路径
*   `--proxy=ROUTE:URL` - 代理ROUTE到URL的所有请求
*   `--help | -h` - 显示简短的使用提示和退出
*   `--version | -v` - 显示版本和退出

运行原理
live-server是一个简单的节点应用程序,用于工作目录及其子目录。它也监视文件的变化,当这种情况发生时,它通过web套接字连接向浏览器发送消息,指示它重新加载。为了让客户端支持这个,服务器为每个请求的html文件注入一小段JavaScript代码。这个脚本建立了web套接字连接并监听重载请求。通过从DOM中查找引用的样式表,并触发浏览器再次获取并解析它们,可以刷新CSS文件,而无需整页重新加载。
所以,让你打开chome控制台,发现多了一小段JavaScript代码请不要惊慌。

在这里插入图片描述

### live-server 使用教程 `live-server` 是一款轻量级的开发服务器工具,主要用于前端开发者实时预览 HTML 页面的变化。以下是关于 `live-server` 的使用方法及相关参数介绍。 #### 安装 live-server 为了使用 `live-server`,需要先安装 Node.js 和 npm 工具。通过以下命令可以在全球范围内安装 `live-server`: ```bash npm install -g live-server ``` 此命令会将 `live-server` 添加到系统的全局环境中,使其可以直接在任何地方调用[^2]。 #### 启动 live-server 启动 `live-server` 非常简单,在目标 HTML 文件所在的目录下打开命令行终端并执行以下命令: ```bash live-server ``` 默认情况下,`live-server` 将监听端口 **8080** 并自动打开浏览器窗口显示当前目录下的索引页面(通常是 `index.html`)。如果需要指定其他端口,则可以通过如下方式实现: ```bash live-server --port=9090 ``` 上述命令将会把服务绑定到 **9090** 端口上运行。 #### 常见参数 除了基本的功能外,`live-server` 还支持多种实用选项来满足不同场景的需求。下面列举了一些常用参数及其作用: - `--port=[number]`: 设置自定义端口号。 - `--host=[hostname]`: 修改主机名,默认为本地环回地址 (`localhost`)。 - `--entry-file=[filename]`: 指定入口文件名称,而非默认寻找 `index.html`。 - `--no-browser`: 不自动弹出浏览器窗口。 - `--open=[url]`: 打开特定 URL 而不是根路径。 - `--watch=[path]`: 只监控某些特定路径中的更改。 - `--ignore=[pattern]`: 排除不需要监视的文件模式。 例如,仅希望观察 CSS 文件变化而不重新加载整个页面时可这样操作: ```bash live-server --watch="*.css" ``` #### 解决常见错误 当遇到 `"live-server" 不是内部或外部命令` 类型的问题时,通常是因为未正确配置环境变量所致。按照以下步骤排查问题: 1. 确认已成功安装 Node.js 和 npm; 2. 检查是否能正常运行 `node -v` 来验证版本号; 3. 如果仍然无法识别 `live-server`,尝试重新设置 node_global 的路径加入 PATH 中[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值