在前端开发中，我们经常需要实时地查看页面在浏览器上的渲染效果。为了方便开发者实时查看页面渲染效果，提高开发效率，广大的前端开发人员针对这个需求开发出来了许多自动刷新浏览器的工具，其中 broccoli-livereload-middleware 就是其中之一。
什么是 broccoli-livereload-middleware？
broccoli-livereload-middleware 是一个使用 Broccoli 打包工具搭建的、支持 livereload 功能的中间件。它的作用是在页面的自动刷新和文件修改检测方面提供支持，使得前端开发者可以更加快速地看到自己编写的代码在浏览器中的真实渲染效果。
该中间件使用了 tiny-lr 提供的 livereload 功能，并对其进行了封装，为开发者提供了更加简洁的 API。
如何使用 broccoli-livereload-middleware？
安装
你可以使用 npm 来安装 broccoli-livereload-middleware：
npm install broccoli-livereload-middleware --save-dev
使用
使用 broccoli-livereload-middleware 相对来说比较简单，只需要通过一个函数来创建一个 livereload 的中间件即可：
const broccoli = require('broccoli');
const broccoliLivereload = require('broccoli-livereload-middleware');
let tree = someBroccoliTree();
let server = broccoli.server();
server.use(broccoliLivereload(tree));其中，someBroccoliTree 表示你自己编写的 Broccoli 树，可以是其它插件的输出，也可以是自己手工构造的。
配置
broccoli-livereload-middleware 可以接受的配置选项有：
target：指定 livereload 的目标浏览器。默认值为'Chrome'。也可以支持Array类型，例如[ 'Chrome', 'Firefox' ]，表示给这两种浏览器都添加 livereload 功能。port：指定 livereload server 监听的端口。默认值为35729。extensions：指定需要监控的文件扩展名。默认值为[ 'html', 'css', 'js' ]。watcher：指定使用的 Broccoli watcher 实例。如果你不想用默认的 watcher，可以指定该选项为自定义的 watcher 实例。
server.use(broccoliLivereload(tree, {
target: 'Firefox',
port: 12345,
extensions: [ 'html', 'css', 'js', 'json' ],
watcher: myOwnWatcherInstance
}));示例代码
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------------------ - ------------------------------------------ -- -- -------- - --- ---- - ------------------------ --- ------- - --- ----------------------- -- -- ---------- --- --- ---------- - --------------------------- - ------- ---------- ----- ------ ----------- - ------- ------ ----- ------ - --- -- ----- --- ------ - ------------------ -- -- ---------- --- ----------------------- -- -- ---- -- ------------------- ---------- - ------------------- -- --------- -- ------------------------ --- -- -- -------- - ------------------------------- - --------------------- ----- ----------- ------------------------ - --------------------- ---------------- ---
结语
broccoli-livereload-middleware 的使用对于前端开发人员来说非常方便。只需要调用函数来创建一个 livereload 的中间件，就可以在浏览器上实时地查看自己代码的渲染效果。同时，其配置灵活且支持多浏览器、多文件扩展名等多种选项，来满足不同开发者的不同需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde502c