前言
在前端开发中，热更新已经成为了必备的一个工具。而实现热更新就需要用到文件监控工具，这时候就要用到 chokidar-graceful-cross-platform 这个 npm 包了。
chokidar-graceful-cross-platform 是一个跨平台的文件监控工具，可以轻松实现文件变化的监控，并进行相应的操作。下面就来详细介绍一下该 npm 包的使用教程。
安装
在使用 chokidar-graceful-cross-platform 之前，我们需要先进行安装。在命令行中运行以下命令进行安装：
--- ------- --------------------------------
基本使用
安装好 chokidar-graceful-cross-platform 后，我们就可以在代码中引入它了。
----- -------- - --------------------------------------------
上面的代码中，我们使用 require 将 chokidar-graceful-cross-platform 引入到了当前的代码中。
接下来，我们需要设置一个路径来监控文件变化。
----- ---- - --------------------
上面的代码中，我们设置了一个路径来监控该路径下的文件变化。
然后，我们需要使用 chokidar 监控该路径下的文件变化：
----- ------- - -------------------- - ----------- ---- -- ---- ---
上面的代码中，我们使用 chokidar.watch() 方法来进行文件变化的监控。其中，第一个参数是要监控的路径，第二个参数是一些监控的配置项。
下面，我们可以监听 watcher 上的一些事件来获取到文件的变化。
----------------- ---- -- - ----------------- ------- --- ---- -------- ---
上面的代码中，我们监听了 add 事件，当文件添加到被监控的目录时，就会触发该事件。
进阶使用
除了基本的文件变化监控之外，chokidar-graceful-cross-platform 还提供了很多高级的功能。
当文件变化时执行命令
有时候，如果文件发生了变化，我们希望自动执行一些命令来进行相应的操作。这时候，我们可以使用 chokidar-shell 这个 npm 包来执行命令。
首先，我们要安装 chokidar-shell：
--- ------- --------------
然后，在代码中引入它：
----- ------------- - --------------------------
接下来，我们可以在配置项中添加 chokidarShell 来执行命令：
----- ------- - -------------------- -
----------- -----
-------------- ----- -- ------------
----------------- ----- -- ------------
----------- ----- -- --------- --------
--------- ----- -- ------
-------------- -
--------- ---- -- ----
-------- ---- --- ------- -- --------------
--
---上面的代码中，我们使用 chokidarShell 来执行命令。
使用 glob 模式
除了监控某一个路径下的文件变化以外，chokidar-graceful-cross-platform 还支持使用 glob 模式来进行文件变化的监控。
----- ----------- - ---------------------------- ----- ------- - --------------------------- - ----------- ---- ---
上面的代码中，我们使用了 glob 模式来进行文件变化的监控，同时，我们可以在 glob 模式中使用通配符来进行更详细的匹配。
监控目录下的所有文件类型
如果我们想要监控某个目录下的所有文件类型的变化，我们可以使用以下代码：
----- ---- - -------------------- ----- ------- - ---------------------------- - -------- ---------------- -- ------ ----------- ---- ---
上面的代码中，我们使用了 ${path}/** 来进行目录下的所有文件类型的变化的监控，同时，代码中的 regex 用来忽略点文件夹。
示例代码
----- -------- - --------------------------------------------
----- ---- - --------------------
----- ------- - -------------------- -
----------- -----
-------------- -----
----------------- -----
----------- -----
--------- -----
-------------- -
--------- ----
-------- ---- --- -------
--
---
----------------- ---- -- -
----------------- ------- --- ---- --------
---
-------------------- ---- -- -
----------------- ------- --- ---- ----------
---
-------------------- ---- -- -
----------------- ------- --- ---- ----------
---总结
以上就是 chokidar-graceful-cross-platform 的使用教程，希望对大家有所帮助。在前端开发中，使用文件监控工具能够大大提高我们的工作效率，同时，也能让我们更加轻松地进行热更新的实现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005527881e8991b448cff60