手摸手玩转 live-server -- 热加载利器

2018-01-19 本文已影响1260人孟烦了的爱豆

live-server是什么？

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

live-server

优点

一键安装，实现自动刷新，架设本地服务器环境。
比起 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代码请不要惊慌。

插入JavaScript代码
附：手摸手带你玩转sublime text 3 安装配置
好玩的CSS抖动样式 – CSS Shake ,支持 react
手摸手玩转经典图表类库 - Echarts3

声明：部分内容从网络获取，如有侵权行为，请与作者联系，作者将于2日内删除。