在前端开发领域，我们经常需要使用到一些工具，比如 metalsmith 和 browser-sync。这两个工具都非常强大，但是需要手动配置和使用起来较为麻烦。而 npm 包 metalsmith-browser-sync 就是为了解决这个问题而生的。它能够自动将这两个工具整合起来，让我们的开发变得更加顺畅。下面就让我们来一步步了解 metalsmith-browser-sync 的使用方法。
1. 安装
我们首先需要在项目根目录下安装 metalsmith 和 browser-sync，如果已经安装过了，可以跳过这一步。
npm install --save-dev metalsmith browser-sync
接下来，我们再安装 metalsmith-browser-sync：
npm install --save-dev metalsmith-browser-sync
现在，我们可以开始配置 metalsmith-browser-sync 了。
2. 配置
我们需要在项目根目录下创建一个名为 metalsmith.js 的文件，这是 metalsmith 的配置文件。
-- -------------------- ---- -------
----- ---------- - ---------------------
----- ----------- - -----------------------
----- --------------------- - ----------------------------------
---------------------
--------------
--------------------
----------------------------
------- -
-------- -------
--
------ -------------
---
---------- -- -
-- ----- ----- ---
-------------
------- -------
------ --------------
--
--上述代码中，我们首先引入了 metalsmith、browser-sync 和 metalsmith-browser-sync 三个模块。然后，我们使用 Metalsmith 创建了一个实例，并通过 source 和 destination 方法指定了源文件夹和目标文件夹。接着，我们使用 use 方法将 metalsmith-browser-sync 插件加入到 Metalsmith 的中间件队列中。在插件的配置中，我们指定了 browser-sync 的服务器配置以及需要监控的文件。
最后，我们使用 build 方法编译项目，并在编译完成后启动 browser-sync 服务器。
3. 运行
到这里，我们的配置就完成了，我们可以通过以下命令启动开发服务器：
node metalsmith.js
接着，浏览器会自动打开，我们可以在其中打开开发页面，并且对其进行修改。保存后，浏览器会自动刷新。
如果你想关闭浏览器自动打开的功能，可以将上述代码中 browserSync 方法的第一个参数修改为 false。
此外，metalsmith-browser-sync 还有许多配置项，可以在官方文档中查看。
4. 总结
通过本文，我们了解了如何使用 npm 包 metalsmith-browser-sync 这个工具自动整合 metalsmith 和 browser-sync，以提高我们的开发效率。希望本文能对您有所帮助。如果您有其他关于前端开发的问题，欢迎访问我的博客：https://example.com。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f431d8e776d08040e5c