Metalsmith-watch 是一个 NPM 包，它可以帮助前端开发人员在本地实时监视和重新构建网站。这个工具非常适合在开发过程中使用，因为它允许你在代码更改时立即看到修改后的结果。
安装
首先需要安装 Node.js 和 NPM。如果你还没有安装，可以到https://nodejs.org 上下载并安装。
然后打开终端，使用以下命令来安装 Metalsmith-watch：
npm install metalsmith metalsmith-watch --save-dev
配置
在使用 Metalsmith-watch 之前，需要先配置一些设置。将下面的代码保存为 metalsmith.js 文件，放在项目根目录下：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - ----------------------------
---------------------
----------------
-----------------------
-------------
---------- -- -
-- ----- ----- ----
---在上面的代码中，我们使用了 Metalsmith() 函数来创建一个新的 Metalsmith 实例，并指定了源文件夹和输出文件夹路径。接下来，我们使用 watch() 函数来创建一个名为 watch 的插件。
运行
现在，我们只需要运行以下命令即可启动监视器：
node metalsmith.js
这将启动 Metalsmith-watch 并开始监视源文件夹中的所有文件。如果你修改了任何一个文件，Metalsmith-watch 将会立即重新构建网站，并将结果输出到目标文件夹。
示例代码
以下是一个示例项目结构：
-- -------------------- ---- ------- - --- ------ --- ------------- --- ---- - --- ---- - - --- --------- - --- --- - - --- ------- - --- ---------- - --- ---------- --- ------------- --- ------------
在上面的示例中，我们有两个 HTML 文件和一些 CSS 和 JavaScript 文件。现在，我们就可以使用 Metalsmith-watch 来实时监视这些文件的更改了。
-- -------------------- ---- -------
-- -------------
----- ---------- - ----------------------
----- ----- - ----------------------------
---------------------
----------------
-----------------------
-------------
---------- -- -
-- ----- ----- ----
---然后，运行以下命令来启动监视器：
node metalsmith.js
现在，在你修改 index.html、about.html、style.css 或者 main.js 文件后，Metalsmith-watch 将会自动重新构建并更新网站。
总结
Metalsmith-watch 是一个非常有用的工具，它可以帮助开发人员在本地快速地实时监视和重新构建网站。通过学习本文，你已经掌握了如何在项目中使用 Metalsmith-watch，并开始享受它带来的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47761