javascript - 添加运行 gulp watch 的条件

Question

我有一个 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.css, gulp.series("sass"));当 gulp.watch(watch.dev, gulp.series("dev")).on("change", browserSync.reload);已经运行。

Answer 1

问题sass的双重执行运行 watch 时的任务任务发生是因为在您共享的代码中，您有效地定义了 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并执行为 dev 定义的任务每次在 paths 中定义的文件只执行一次任务更新。
- 可能的解决方案 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
我希望这些可能的解决方案可以帮助您了解您共享的代码中遇到的问题!