使用Gulp watch如何仅在修改后的文件上运行任务？

当使用Gulp作为项目构建工具时，利用其watch功能可以监控文件的变化，并在检测到修改时自动执行特定任务。这种方法极大地提高了开发效率，避免了重复手动执行任务的烦恼。以下是如何设置gulp.watch以仅在文件修改时运行特定任务的步骤和例子：

步骤 1: 安装Gulp

首先，确保你的项目中安装了Gulp。可以通过npm来安装：

bash
npm install --save-dev gulp

步骤 2: 创建Gulp任务

在你的Gulp配置文件中（通常是gulpfile.js），定义一些自动化任务。比如，我们可以创建一个简单的任务来压缩CSS文件：

javascript
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('src/css/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist/css'));
});

步骤 3: 使用gulp.watch设置监控

接下来，在gulpfile.js中设置watch任务，以监控特定文件的变化，然后触发相应的Gulp任务：

javascript
gulp.task('watch', () => {
  // 监控所有CSS文件的变化，一旦变化则执行`minify-css`任务
  gulp.watch('src/css/*.css', gulp.series('minify-css'));
});

在这个例子中，gulp.watch的第一个参数是要监控的文件路径，第二个参数是当检测到文件变化时要执行的任务。使用gulp.series('minify-css')确保任务按顺序执行。

步骤 4: 运行watch任务

最后，通过命令行启动watch任务：

bash
gulp watch

这时，每当你修改src/css/目录下的任何.css文件时，Gulp会自动执行minify-css任务来压缩CSS文件，并将压缩后的文件保存到dist/css目录。

优点

使用gulp.watch的主要优点是自动化和效率提升。开发者可以专注于代码的编写，而不需要不断手动运行构建任务。此外，它也有助于减少因忘记执行任务而引入的人为错误。

通过这种方法，你可以确保任何文件的更改都能即时反映到最终产品中，从而加快开发周期并提高产品质量。