我大口地看了一下任务如下:
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"));
?
2条答案
按热度按时间6qfn3psc1#
问题
在运行
watch
任务时,会发生sass
任务的两次执行,因为在您共享的代码中,您实际上定义了要运行两次的sass
任务。因此,每次运行
gulp dev
时,sass
任务将仅执行一次,而每次运行gulp watch
时,sass
任务将执行两次。溶液
为了解决这个问题,你也许可以用一种稍微不同的方式重新排序执行。
-可能的解决方案1
在这个例子中,我们将
sass
任务定义为dev
任务的gulp.series
中定义的要运行的组合任务的一部分。它还允许我们在每次更新paths
中定义的文件时运行gulp watch
并执行为dev
任务定义的任务一次。-可能的解决方案2
在此示例中,我们从要为
dev
任务运行的组合任务中删除了sass
任务,并且定义了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
我希望这些可能的解决方案能帮助您了解您共享的代码中存在的问题!
mf98qq942#
假设这是由于快速的文件更改造成的,则设置watch
delay
选项可能会有所帮助:gulp.watch(watch.dev, { delay: 500 }, gulp.series("dev"))
如果这样做没有帮助,你可能需要找到一种方法来反跳事件。有一个名为gulp-debounce的旧包似乎可以做到这一点,但它是未经维护的,因此可能是不兼容的,但查看其源代码可能会提供一些见解。