在前端开发中，我们经常需要更改代码后手动刷新页面来查看效果。这样会浪费大量的时间，并且会降低我们的开发效率。为了解决这个问题，我们可以使用 browser-sync-brunch 这个 npm 包，可以实现浏览器自动刷新和热加载页面的功能，从而可以大大提高我们的开发效率。
安装
在使用 browser-sync-brunch 之前，我们需要先安装 brunch。打开终端输入以下命令：
npm install -g brunch
接下来，我们需要在我们的项目中安装 browser-sync-brunch。在终端中进入项目的根文件夹，输入以下命令：
npm install --save-dev browser-sync-brunch
配置
完成安装后，我们需要对 brunch 配置文件进行修改，以便激活 browser-sync-brunch。
在项目根文件夹下创建 config.js 文件，并添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
------------ -
----- -----
------ -----------------------
-
-
-这个配置文件中的 port 属性可以指定 browser-sync-brunch 运行的端口号，proxy 属性可以设置需要代理的服务器地址，这里我们把它设置为 http://localhost:3333。
运行
完成以上配置后，我们只需要在终端中输入以下命令就可以启动 browser-sync-brunch 了：
brunch watch --server
在运行完以上命令后，我们可以在浏览器中输入 http://localhost:3000 来访问我们的页面。此时，我们所有的修改都会被自动同步到浏览器中，不需要手动刷新页面。
示例代码
以下是一个示例代码，让你更好地了解 browser-sync-brunch 的使用方法：
// 1. 文件路径 dev/js/application.js
// 2. 执行模块
console.log("Hello World!");
// 3. 对外暴露函数
module.exports = function() {
console.log("Hello Module!");
};总结
在前端项目开发中，使用 browser-sync-brunch 这个 npm 包可以大大提高我们的开发效率。通过对 brunch 配置文件的配置和运行相应的命令，我们就可以实现页面的自动刷新和热加载。这个工具让我们更加专注于代码的编写，可以大大提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde5210