记一次简单的实时刷新页面的利器 live-server

1,766 阅读3分钟

在写静态页面或者没有热更新的网页中，我们传统的做法是写完代码然后再打开浏览器刷新。这样的工作效率极其低。下面介绍两个基于nodejs的第三包，让你实现静态页面实时刷新。爽到爆

  1. live-server

    • 首先全局安装live-server
    • npm install -g live-server

    使用时切换到根目录，直接启动命令 live-server,直接启动就可以实时热更新。

    或者使用npm init -y 初始化一个项目

使用 npm run dev开启就可已
下面是一些常用的配置，可自行根据项目需要配置即刻。

* `--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`    - 显示版本和退出

  1. http-server 创建一个简单的本地服务器，如果再相同的局域网下。大家都可以访问到你的链接。

    首先还是全局安装http-server应用

    npm install -g http-server

    然后切换到根目录下执行 http-server 直接运行，或者根据上面的类似，npm init -y 在

执行 npm run dev就可以启动项目了

  • -p 要使用的端口（默认为8080）

  • -a 要使用的地址（默认为0.0.0.0）

  • -d 显示目录列表（默认为“True”）

  • -i 显示autoIndex（默认为“True”）

  • -g或–gzip启用时（默认为“False”），它将用于./public/some-file.js.gz代替./public/some-file.jsgzip压缩版本的文件，并且该请求接受gzip编码。

  • -e或–ext默认文件扩展名（如果没有提供）（默认为’html’）

  • -s或–silent从输出中抑制日志消息

  • –cors通过Access-Control-Allow-Origin标题启用CORS

  • -o 启动服务器后打开浏览器窗口

  • -c设置缓存控制max-age头的缓存时间（以秒为单位），例如-c10 10秒（默认为’3600’）。要禁用缓存，请使用-c-1。

  • -U或–utc在日志消息中使用UTC时间格式。

  • -P或–proxy代理无法在本地解决给定网址的所有请求。例如：-P someurl.com

  • -S或–ssl启用https。

  • -C或–certssl证书文件的路径（默认值：cert.pem）。

  • -K或–keyssl密钥文件的路径（默认值：key.pem）。

  • -r或者–robots提供一个/robots.txt（其内容默认为’User-agent：* \ nDisallow：/’）

  • -h或–help打印此列表并退出。

  • 最常用的命令

开启http服务器，并禁止浏览器缓存：http-server -c-1

avatar
文章
阅读
粉丝