live-server是什么?

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

优点

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

使用场景

在你写好页面之后,查看打包好的文件
可以实现的功能包括:
搭建临时的服务
修改文件浏览器自动刷新
自动打开项目

安装使用

1、安装nodeJs
2、打开命令行工具,输入命令npm install -g live-server
3、然后在项目根目录执行live-server --port=8080,就可以看到了
注意事项
输入命令 live-sever 启动,默认会自动打开浏览器,并且访问8080端口。如果8080端口被占用,可以使用命令行参数更换端口。
根目录文件名不允许以”.”开头,否则无法热更新

其他方式:

1
2
3
4
5

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

命令行参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

* `--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` - 显示简短的使用提示和退出

运行原理

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

最后更新: 2019年11月10日 19:15

原始链接: http://ldc5886.github.io/2019/10/26/live-server/

× 请我吃糖~
打赏二维码