Pavane 是一个基于 Node.js 的 LiveReload Server 工具。
提供修改文件自动刷新浏览器页面的能力。Pavane 提供丰富的自定义选项，满足大部分的使用开发需求。
安装
$ npm i pavane -D # 作为模块使用
$ npm i pavane -g # 全局 CLI 使用使用
Pavane 既可以作为一个 Node 模块使用，也可以作为一个命令行工具全局使用，还可以在其他 web 服务上使用
Node 模块
const { join, extname } = require('path')
const Pavane = require('pavane')
/*
监听目录
文件, 目录, glob 匹配, 或者 数组
默认: 当前运行目录
*/
const watches = join(process.cwd(), 'src')
/*
静态资源目录
默认: 当前运行目录
*/
const publics = __dirname
const server = new Pavane(watches, publics)
server.listener = (args) => {
const {
event, // 文件信息 'add', 'change', 或者服务器信息 'info' ...
path, // 修改路径，当事件为 'info', 为空
message, // 服务器信息，如果事件为 'info', 此时为空
reloadCss, // 触发客户端 css 重置
reloadPage, // 触发客户端刷新页面
} = args
const { log } = global.console
if (event === 'info') {
log(message) // 输出服务器信息
return
}
// 获取当前改变文件的后缀，然后进行 css，js 构建之类
const ext = extname(path)
if (ext === '.css') {
reloadCss() // 重置 css
} else {
reloadPage() // 刷新页面
}
log(`${event} ${path}`) // 输出当前信息
}
server.start(2222) // 默认端口 2333
// 另外一种方式获取当前状态
console.log(server.status)
/*
{
running: true,
event: 'change',
path: 'file path',
}
*/CLI 全局使用
$ pavane # 默认使用，当前目录作为监听文件变化目录，同时也作为静态服务器目录
$ pavane -p 2000 # 自定义端口
$ pavane -c # 使用配置启动
$ pavane -w src -s dist # 设置监听目录 src，静态 server 目录 dist
# pavane 可以简写为 pv
$ pv -p 2000使用配置启动需要在运行目录添加一个配置文件 pavane.config.js
const { extname } = require('path')
module.exports = {
watches: ['*.js', '*.css', '*.html', '**/*.html'], // 监听目录，文件, 目录, glob 匹配, 或者 数组
publics: __dirname, // 静态文件目录
port: 2222, // 端口
listener(args) {
const {
event,
path,
message,
reloadCss,
reloadPage,
} = args
const { log } = global.console
if (event === 'info') {
log(message)
return
}
// 获取当前改变文件后缀
const ext = extname(path)
if (ext === '.css') {
// 这里可以进行一些 css 构建之类的
// 然后刷新页面 css
reloadCss()
} else {
// 同样可以进行 js，html 之类的构建
// 然后刷新页面
reloadPage()
}
log(`${event} ${path}`)
}
}在其他 web 服务上使用
如果当前的应用是由 python，php 之类的应用，可能会有自己的 web 服务。如果需要引入 Pavane 的 LiveReload 能力也是可以的，只需要在应用的前端模板页面上相应位置加上这个 script
<!-- 假设当前启动的服务端口是 2333 -->
<script src="http://127.0.0.1:2333/_.js"></script>这时候在模板目录启动 Pavane，修改模板文件，静态资源后就可以自动刷新页面了
适用场景
每个工具都具有自己相应的使用场景，所以 Pavane 的适用场景是
- 简单静态页面开发，例如活动页面，宣传页面
- 前后端揉合的 web 应用，例如 python django 的后台页面
- 需要转码的前端页面，例如需要 less，sass，babel 转码的应用
但是如果你的应用是前后端分离的单页应用，vue，react 之类的，还是直接上 webpack 构建工具吧，具有更高级的刷新页面功能
