介绍
在前端开发过程中，我们经常需要对我们的代码进行修改和重新构建。传统的方式是手动地运行构建命令，这样不仅浪费时间，而且容易出错。 但是，如果有一个工具可以自动检测文件更改并重新运行构建命令，那将大大提高我们的工作效率。这就是 @glide-js/gwatch 的用武之地。
@glied-js/gwatch 是一个简单易用的依赖于 Gulp 的文件监控工具，用于自动重新构建你的项目。
安装
你可以通过 npm 来安装 @glied-js/gwatch:
npm install @glied-js/gwatch --save-dev
使用
为了使用 @glied-js/gwatch，你需要在你的项目中配置 gulpfile.js:
const gulp = require('gulp');
const gwatch = require('@glied-js/gwatch');
gulp.task('default', function() {
gwatch({
// 要监视的文件或文件夹的路径
src: './src/**/*',
// 在更改后运行的命令，例如：npm run build
cmd: 'npm run build'
});
});在这段代码中，gwatch 方法监听 ./src 文件夹下所有的文件或子文件夹的更改，一旦有任何更改，就会运行 "npm run build" 命令。
要开始监视，请运行 gulp 默认任务：
gulp
选项
@glied-js/gwatch 提供了几个可用的选项，用于定制化使用：
src
类型: String 或 Array
要监视的文件或文件夹的路径。
可以是字符串形式，例如 ./src/**/*。
亦可为数组形式，例如 ['./src/scss/**/*', './src/js/**/*']。
cmd
类型: String
在更改后要运行的命令。
例如：npm run build。
delay
类型: Number
延迟自动运行指定时间。
单位：毫秒。
默认为 1000。
例如：delay: 2000，表示通过 2 秒后自动运行指定命令。
log
类型: Boolean
是否打印输出日志信息。
默认为 true。
showNotification
类型: Boolean
是否在各个平台上显示桌面通知。
默认为 true。
示例
下面是一个示例，它下载 @glied-js/gwatch 并在文件更改时自动重新构建 webpack。
const gulp = require('gulp');
const gwatch = require('@glied-js/gwatch');
gulp.task('default', function() {
gwatch({
src: './src/**/*',
cmd: 'npm run build'
});
gwatch({
src: './dist/**/*',
cmd: 'webpack'
});
});这个例子使用两个任务，一个是监视 "./src" 目录下的所有文件更改，并重新运行构建命令 "npm run build"。 第二个任务则监听生成文件夹 "./dist" 的更改，并运行 webpack 命令进行重新构建。
总结
@glide-js/gwatch 可以帮助你自动化监测文件更改并重新运行指定命令，从而使得前端开发过程变得更加高效。希望通过这篇文章的介绍，你已经学会如何在项目中使用 @glide-js/gwatch 了，并可以在实际项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e3fb81d47349e53e44