Gulp 添加运行 Gulp 监视的条件

isr3a4wc  于 2022-12-08  发布在  Gulp
关注(0)|答案(2)|浏览(139)

我大口地看了一下任务如下:

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"));

6qfn3psc

6qfn3psc1#

问题

在运行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任务定义为dev任务的gulp.series中定义的要运行的组合任务的一部分。它还允许我们在每次更新paths中定义的文件时运行gulp watch并执行为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"));

在此示例中,我们从要为dev任务运行的组合任务中删除了sass任务,并且定义了another_extra_task任务,其中我们组合了devsass任务。这将允许我们运行gulp another_extra_task并执行为devsass任务定义的所有组合任务。而且它还允许我们运行gulp watch,而无需重复执行sass任务,因为在第一个监视器中,我们执行dev任务,其中不再定义sass任务,而我们只是用第二个监视器执行它。
结论
由于任务的定义取决于每个特定的用例,我建议您尝试以更细粒度的方式重新排序它们的执行。https://gulpjs.com/docs/en/api/series#avoid-duplicating-tasks
我希望这些可能的解决方案能帮助您了解您共享的代码中存在的问题!

mf98qq94

mf98qq942#

假设这是由于快速的文件更改造成的,则设置watch delay选项可能会有所帮助:
gulp.watch(watch.dev, { delay: 500 }, gulp.series("dev"))
如果这样做没有帮助,你可能需要找到一种方法来反跳事件。有一个名为gulp-debounce的旧包似乎可以做到这一点,但它是未经维护的,因此可能是不兼容的,但查看其源代码可能会提供一些见解。

相关问题