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/

其他

• Github仓库地址：github.com/tapio/live-server
• 官方使用指南地址：github.com/tapio/live-server#readme