如何简化Gulp中监听多类文件的Jekyll-reload任务？

嘿，你的代码确实存在重复冗余的问题——多次调用gulp.watch但都是触发同一个任务，其实可以用非常简洁的方式优化：

核心思路 #

gulp.watch的第一个参数支持传入路径数组，所以我们可以把所有需要监听的路径整合到一个数组里，只调用一次gulp.watch就搞定所有监听。

优化后的代码 #

let files = { 
  html: './*.html', 
  htmlDeeper: './*/*/.html', 
  css: './_assets/css/*.scss', 
  cssDeeper: './_sass/*/*.scss', 
  js: './*.js', 
  jsDeeper: './_assets/js/*.js', 
  yml: './_config.yml' 
}; 

// Watch for file changes
gulp.task('watch', () => {
  // 提取files对象中所有的路径值，组成数组
  const allWatchPaths = Object.values(files);
  // 一次性监听所有路径，触发jekyll-reload任务
  gulp.watch(allWatchPaths, ['jekyll-reload']);
});

为什么这样更优？ #

• 消除了重复的gulp.watch调用，代码更简洁易读
• 后续新增监听路径时，只需要在files对象里添加新的键值对即可，不用修改watch任务的逻辑
• 逻辑更清晰：所有监听路径统一管理，触发的任务也明确单一

内容的提问来源于stack exchange，提问作者fencepencil