live-server -- 热加载利器

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代码请不要惊慌。

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值