本文介绍使用 fly-watch 这个 npm 包来进行前端项目的自动化构建和热加载管理的方法。这个工具可以跨平台使用，可以在 macOS、Linux 和 Windows 系统上运行。它支持文件夹、文件和 glob 模式的监视，并支持定制化的命令行参数和事件监听器。此外，它还可以与其他 npm 包，例如 fly 命令行工具、gulp 和 webpack 集成使用，以实现更高级的自动化构建和测试等功能。
安装
你需要在你的项目根目录中安装 fly-watch 和 fly 包，命令如下：
npm install --save-dev fly-watch fly
快速开始
在安装完成之后，我们可以在项目根目录下创建一个名为 flyfile.js 或者 .fly.js 的文件，并在其中编写一些任务。
module.exports = {
start: 'fly dev', // 入口命令，可以是任意命令
dev: async function () {
await this.watch('src/*.js', ['build']) // 监视 src 目录下的所有 js 文件，并构建项目
},
build: 'echo "Hello, world!"' // 构建文件
}上述配置文件中，我们定义了一个 start 的命令来启动我们的开发环境，它会执行 dev 命令，而 dev 命令则会监视 src 目录下的所有 js 文件，如果有变动则执行 build 命令来构建项目。最后，build 命令只是一个简单的打印命令。
在终端中，你可以使用以下命令来执行 start 任务：
fly
这时，你就可以愉快的开始你的开发和构建了！
高级用法
监听多个文件夹或者文件
如果我们需要监视多个文件夹或者文件，我们可以简单的在 watch 函数中添加多个参数：
await this.watch(['src/*.js', 'src/index.html'], ['build'])
这时，fly-watch 将同时监视 src 目录下的所有 js 文件和 index.html 文件，并在它们发生变化时执行构建命令。
规则匹配
在我们的监视规则中，可以使用类似于 glob 的语法：
this.watch('src/css/**/*.less', ['compile-css'])这时将会监视 src/css 目录下任意子目录中的所有 less 文件，并在它们发生变化时执行 compile-css 命令。
文件过滤
在某些情况下，我们可能需要过滤掉某个特定的文件或者文件夹，避免它们被监视。我们可以使用 ignore 参数来实现：
await this.watch(['src/*', '!src/README.md'], ['build'], { ignore: ['**/*.txt'] })这时将会监视 src 目录下任意文件和文件夹，除了 README.md 文件和所有 .txt 文件。
额外参数
我们可以向构建命令中添加额外参数，fly-watch 会告诉我们有哪些参数发生了变化：
await this.watch(['src/*'], ['build'], { args: '--color' })这时将会监视 src 目录下任意文件和文件夹，并在它们发生变化时执行 build 命令，并带上 --color 参数。
定制事件监听器
我们可以使用事件监听器来监听每个事件的发生，在不同的事件中添加不同的逻辑。使用 fly-watch 可以方便的定制事件监听器：
-- -------------------- ---- -------
----- ------------------------ ---------- -
------- -
---- ----- -------- -------- -
----- ------------------ -------
--
------- ----- -------- -------- -
----------------- --------- ----------
--
------- ----- -------- -------- -
----------------- --------- ----------
-
-
--这时对于每个事件，我们就可以做出不同的反应了。例如添加新文件时就执行 lint 命令。
结论
以上是使用 fly-watch 构建和管理前端项目的详细教程，它是一个简单、灵活和强大的工具，可以帮助你实现自动化构建、测试和热加载等功能。希望本文对你有所帮助，如有疑问或者建议，请留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552bd81e8991b448d0240