Pavane

@LoeiFy 2018-07-29 03:03:25发表于 LoeiFy/Recordum Nodejs

Pavane 是一个基于 Node.js 的 LiveReload Server 工具。

提供修改文件自动刷新浏览器页面的能力。Pavane 提供丰富的自定义选项,满足大部分的使用开发需求。

项目地址:https://github.com/fratercula/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 构建工具吧,具有更高级的刷新页面功能