Broccoli-browser-sync-ml 是一个基于 Broccoli 和 BrowserSync 构建的前端自动化工具，用于开发时的静态文件的构建与自动刷新，使用它可以大大提高前端开发的效率。下面将详细介绍如何安装和使用这个工具。
安装
首先需要安装 node.js，然后使用 npm 命令进行安装：
npm install broccoli-browser-sync-ml --save-dev
在项目中安装完毕后，可以在命令行中输入以下命令进行验证是否安装成功：
./node_modules/.bin/broccoli-browser-sync-ml
如果正确安装，命令行会输出这个工具的帮助信息。
使用
配置
在项目根目录下新建一个 Brocfile.js 文件，并添加以下内容：
-- -------------------- ---- ------- --- ------------- - ------------------------------------ --- ---- - ------ -------------- - ------------------- - ----- ------------ ----- ----- ------ --- ---- ------ ----- ---- ---
其中 tree 参数为 Broccoli 构建树的根节点，这里使用 app 表示在项目根目录下 app 目录中的静态文件为构建树的根节点。
其余参数介绍如下：
host: 自动刷新的主机名，默认为localhost。port: 自动刷新的端口号，默认为3000。proxy: 代理地址，如果需要使用代理，可以设置这个参数。ssl: 是否使用 ssl 加密，默认为false。open: 是否自动打开浏览器，默认为true。
运行
使用以下命令可以启动项目的开发模式：
./node_modules/.bin/broccoli serve
运行后会在命令行上输出如下信息：
Livereload server on 35729 Serving on http://localhost:4200/
其中第一行为 Livereload 服务器监听的端口号，可以在打开的浏览器控制台中看到其发送的信号；第二行则是 Broccoli 构建树的根节点的访问地址。
示例
以下是一个简单的示例，假设项目的目录结构如下：
project/
app/
index.html
css/
main.css
js/
main.js
Brocfile.js在 Brocfile.js 中添加以下配置：
-- -------------------- ---- ------- --- ------------- - ------------------------------------ --- ---- - ------ -------------- - ------------------- - ----- ------------ ----- ----- ------ --- ---- ------ ----- ---- ---
然后使用 ./node_modules/.bin/broccoli serve 命令启动开发模式。
打开浏览器访问 http://localhost:4200/，你应该能够看到 app 目录下的 index.html 引用的 main.css 和 main.js 文件。
现在假设要修改 main.css 文件，可以在编辑器中进行修改，保存后会自动刷新浏览器，这很方便。
总结
使用 broccoli-browser-sync-ml 可以大大提高前端开发的效率，使得开发人员的修改可以实时反映在浏览器中，有效地避免了手动刷新页面的繁琐操作。它的安装和使用非常简单，但需要注意的是，运行 broccoli serve 命令时必须要在项目的根目录下。同时，在开发中使用 version control 的最佳实践是忽略 node_modules 目录。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5287