胖蔡说技术
随便扯扯

live-server让你的代码实时部署【开发环境适用】

今天来给大家介绍一款精巧的实施加载部署前端项目的一个工具库live-server,这是一个具有实时重新加载功能的小型开发服务器。使用它来破解您的 HTML/JavaScript/CSS 文件,但不能用于部署最终站点。

通过使用Live-server,我们可以在本地快速搭建一个后台服务器,实现如下功能:

  • 由于安全限制,AJAX 请求不适用于 file:// 协议,也就是说,如果您的站点通过 JavaScript 获取内容,则您需要一个服务器。
  • 在文件更改后自动重新加载页面可以加速开发。

安装

我们可以通过nodejs将其安装在全局开发环境中:

$ npm install -g live-server 

使用

我们可以通过live-server命令来实现部署使用,也可以通过nodejs导入使用,使用如下:

1、通过live-server命令使用

通过live-server命令使用,这将自动启动默认浏览器。当您对任何文件进行更改时,浏览器将重新加载页面 – 除非它是 CSS 文件,在这种情况下,更改将在不重新加载的情况下应用。命令支持添加参数:

  • --port=NUMBER – 选择要使用的端口,默认:PORT env var 或 8080
  • –host=ADDRESS – 选择要绑定的主机地址,默认:IP env var 或 0.0.0.0(“任何地址”)
  • –no-browser – 禁止自动启动网络浏览器
  • –browser=BROWSER:指定要使用的浏览器而不是系统默认浏览器
  • --quiet | -q – 禁止记录
  • --verbose | -V – 更多日志记录(记录所有请求,显示所有侦听的 IPv4 接口等)
  • --open=PATH  – 将浏览器启动到 PATH 而不是服务器根目录
  • --watch=PATH – 以逗号分隔的路径字符串,专门监视更改(默认值:监视所有内容)
  • --ignore=PATH – 要忽略的以逗号分隔的路径字符串(任何匹配兼容的定义)
  • --ignorePattern=RGXP – 要忽略的文件的正则表达式(即 .*.jade)(已弃用,取而代之的是 –ignore)
  • --no-css-inject – 在 CSS 更改时重新加载页面,而不是注入更改后的 CSS
  • --middleware=PATH – 导出要添加的中间件函数的 .js 文件的路径;可以是没有路径的名称,也没有扩展名来引用中间件文件夹中的捆绑中间件。
  • --entry-file=PATH – 提供此文件(相对于服务器根目录)以代替丢失的文件(对单页应用程序很有用)
  • --mount=ROUTE:PATH -在定义的路由下提供路径内容(可能有多个定义)
  • --spa – 将 /abc 中的请求翻译成 /#/abc (对于单页应用程序很方便
  • --wait=MILLISECONDS -(默认 100 毫秒)等待所有更改,然后重新加载
  • --htpasswd=PATH – 启用 http-auth 期望 htpasswd 文件位于 PATH
  • --cors -为任何来源启用 CORS(反映请求来源,支持带有凭据的请求)
  • --https=PATH – HTTPS 配置模块的路径
  • --https-module=MODULE_NAME – 自定义 HTTPS 模块(例如 spdy
  • --proxy=ROUTE:URL – 代理所有对 ROUTE 到 URL 的请求
  • --help | -h – 显示简洁的用法提示并退出
  • --version | -v -显示版本并退出

命令示例如下:

$ live-server --port=8081

2、Nodejs使用

我们可以通过nodejs来引入live-server模块,通过配置live-server参数实现服务器的启动功能,nodejs引用代码如下:

var liveServer = require("live-server");

var params = {
	port: 8081, // 设置服务器端口,默认8080
	host: "0.0.0.0", //选择要绑定的主机地址,默认:0.0.0.0(“任何地址”)或者 process.env.IP.
	root: "/public", //设置正在提供服务的根目录。默认为 cwd。
	open: false, // 如果为 false,默认情况下不会加载您的浏览器。
	ignore: 'scss,my/templates', // 要忽略的路径的逗号分隔字符串
	file: "index.html", //设置后,为每个 404(对单页应用程序有用)提供此文件(服务器根目录相关)
	wait: 3000, // 
在重新加载之前等待所有更改。默认为 0 秒。
	mount: [['/components', './node_modules']], // 将目录挂载到路由。
	logLevel: 1, // 
0 = 仅错误,1 = 一些,2 = 很多
	middleware: [function(req, res, next) { next(); }] //采用一组注入到服务器中间件堆栈中的 Connect 兼容中间件
};
liveServer.start(params);

高级功能

1、HTTPS

为了启用 HTTPS 支持,您需要创建一个配置模块。该模块必须导出将用于配置 HTTPS 服务器的对象。这些密钥与 tls.createServer 的选项中的密钥相同。示例代码如下:

var fs = require("fs");

module.exports = {
	cert: fs.readFileSync(__dirname + "/server.cert"),
	key: fs.readFileSync(__dirname + "/server.key"),
	passphrase: "123456789"
};

如果使用节点 API,您还可以直接传递一个配置对象而不是模块的路径。

2、HTTP/2

要获得 HTTP/2 支持,可以通过 --https-module CLI 参数(Node.js 脚本的 httpsModule 选项)提供自定义 HTTPS 模块。请务必先安装模块。浏览器不支持 HTTP/2 未加密模式,因此 live-server 不支持。请参阅此问题,我可以使用 HTTP/2 上的页面了解更多详细信息。例如来自 CLI(bash):

$ live-server \
	--https=path/to/https.conf.js \
	--https-module=spdy \
	my-app-folder/

其他

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » live-server让你的代码实时部署【开发环境适用】
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏