添加条件以运行 gulp watch答案

【问题标题】：Add a condition to run a gulp watch添加条件以运行 gulp watch
【发布时间】：2021-12-05 12:12:04
【问题描述】：

我有一个 gulp watch 任务如下：

gulp.task("watch", () => {
  const watch = {
    'dev': [src_folder + '**/*.njk', src_js_folder + '**/*.js'],
    'css': [src_sass_folder + '**/*.scss']
  }
  gulp.watch(watch.dev, gulp.series("dev")).on("change", browserSync.reload);
  gulp.watch(watch.css, gulp.series("sass"));

});

gulp.task("dev", gulp.series("merge-json", "nunjucks", "sass", "js"));

因此，当*.sass 文件发生任何更改时，sass 任务将运行，而当*.js 和/或*.njk 文件发生更改时，任务dev 将运行。

我遇到的问题是，当*.sass、*.js 和/或*.njk 同时发生变化时，sass 任务将在这种情况下运行两次。

当 gulp.watch(watch.dev, gulp.series("dev")).on("change", browserSync.reload); 已经运行时，如何跳过gulp.watch(watch.css, gulp.series("sass"));。

【问题讨论】：

标签： javascript node.js build gulp

【解决方案1】：

问题

在运行watch 任务时会发生sass 任务的双重执行，因为在您共享的代码中，您实际上将sass 任务定义为运行两次。

gulp.task("watch", () => {
    const watch = {
        'dev': [src_folder + '**/*.njk', src_js_folder + '**/*.js'],
        'css': [src_sass_folder + '**/*.scss']
    }

    // 1st execution > The `dev` task is defined into the `gulp.series()` as part
    // of the combined tasks to run for this watcher, and, as `dev` contains the
    // `sass` task in it this will run it the first time.
    gulp.watch(watch.dev, gulp.series("dev")).on("change", browserSync.reload);
    
    // 2nd execution > This watcher have the `sass` task defined into the
    // `gulp.series()` as part of the combined tasks to run, this will run
    // the second time
    gulp.watch(watch.css, gulp.series("sass"));
});

// The `dev` task contains the`sass` task into the `gulp.series()` as part
// of the combined tasks to run
gulp.task("dev", gulp.series("merge-json", "nunjucks", "sass", "js"));

因此，每次运行gulp dev，sass 任务只会执行一次，而每次运行gulp watch，sass 任务将执行两次。

解决方案

要解决这个问题，您也许可以用稍微不同的方式重新排序执行。以下是一些可能的解决方案的一些想法。

- 可能的解决方案 1

const paths = {
    njk: src_folder + '**/*.njk',
    js: src_js_folder + '**/*.js',
    sass: src_sass_folder + '**/*.scss'
}

gulp.task("watch", () => {
    gulp.watch([
            paths.njk,
            paths.js,
            paths.sass
        ],
        gulp.series("dev")
    ).on("change", browserSync.reload);
});

gulp.task("dev", gulp.series("merge-json", "nunjucks", "sass", "js"));

在此示例中，我们将 sass 任务定义为要在 gulp.series 中为 dev 任务定义的组合任务的一部分。这将允许我们运行gulp dev 并且只执行一次所有这些任务。它还允许我们运行gulp watch 并在每次更新paths 中定义的文件时只执行一次为dev 任务定义的任务。

- 可能的解决方案 2

const paths = {
    njk: src_folder + '**/*.njk',
    js: src_js_folder + '**/*.js',
    sass: src_sass_folder + '**/*.scss'
}

gulp.task("watch", () => {
    gulp.watch([
            paths.njk,
            paths.js,
        ],
        gulp.series("dev")
    ).on("change", browserSync.reload);
    gulp.watch(paths.sass, gulp.series("sass");
});

gulp.task("dev", gulp.series("merge-json", "nunjucks", "js"));

gulp.task("another_extra_task", gulp.series("dev", "sass"));

在此示例中，我们从组合任务中删除了 sass 任务以运行 dev 任务，此外，我们定义了 another_extra_task 任务，其中我们组合了 dev 和 sass 任务。这将允许我们运行gulp another_extra_task 并执行为dev 和sass 任务定义的所有组合任务，而且，它将允许我们运行gulp watch 而无需重复执行sass 任务，因为在第一个观察者中，我们执行dev 任务，其中不再定义sass 任务，我们只使用第二个观察者执行它。

结论

由于任务的定义取决于每个特定的用例，我建议您尝试以更细化的方式重新排序它们的执行。请参阅以下参考资料，该参考资料解释了如何避免重复任务https://gulpjs.com/docs/en/api/series#avoid-duplicating-tasks

我希望这些可能的解决方案能帮助您了解您在共享的代码中遇到的问题！

【讨论】：

【解决方案2】：

假设这是由于快速的文件更改，设置手表delay 选项可能会有所帮助：

gulp.watch(watch.dev, { delay: 500 }, gulp.series("dev"))

如果这没有帮助，您可能需要找出一种方法来消除事件的反弹。有一个名为 gulp-debounce 的旧包似乎可以实现这一目标，但它没有维护，因此可能不兼容，但查看其源代码可能会获得一些见解。

【讨论】：