如何在Gulp中合并重复Nunjucks渲染函数，实现代码复用

当然可以，这种场景非常适合用路径数组遍历+通用处理函数的方式消除重复代码，核心思路是把不同的路径配置抽成数组，再用一个通用函数封装所有公共渲染逻辑。

具体实现步骤： #

1. 调整路径配置结构
   把原来分散的src/src2、dest/dest2改成包含多组路径的数组，方便后续遍历：

// 示例paths配置
const paths = {
  views: [
    {
      src: 'src/views/**/*.njk',  // 第一组源路径
      dest: 'dist/views'          // 第一组目标路径
    },
    {
      src: 'src/other-views/**/*.njk',  // 第二组源路径
      dest: 'dist/other-views'          // 第二组目标路径
    }
  ]
};

2. 创建通用的Nunjucks渲染函数
   编写一个接收路径配置参数的函数，封装所有公共渲染逻辑：

const gulp = require('gulp');
const nunjucksRender = require('gulp-nunjucks-render');

// 通用渲染函数，接收单组路径配置
function renderNunjucks(viewConfig) {
  return gulp.src(viewConfig.src)
    .pipe(nunjucksRender({
      // 这里可以放公共的nunjucks配置，比如模板根路径
      path: ['src/templates/']
    }))
    // 可添加其他公共处理步骤，比如错误捕获、HTML压缩等
    // .pipe(plumber())
    // .pipe(htmlmin())
    .pipe(gulp.dest(viewConfig.dest));
}

3. 生成合并任务或注册单个任务

• 如果需要一次性处理所有视图，用gulp.parallel创建合并任务：

// 合并任务：并行处理所有视图组
const genAllNunjucks = gulp.parallel(
  ...paths.views.map(config => () => renderNunjucks(config))
);

// 导出任务，用于gulp命令调用
exports.genAllNunjucks = genAllNunjucks;

• 如果需要保留单独的任务（比如单独处理某一组视图），可以遍历数组注册任务：

// 遍历注册单个任务，比如genNunJucks1、genNunJucks2
paths.views.forEach((config, index) => {
  gulp.task(`genNunJucks${index + 1}`, () => renderNunjucks(config));
});

优势： #

• 消除重复代码，公共逻辑只需维护一次
• 后续新增视图组，仅需在paths.views数组中添加新配置项，无需修改渲染逻辑
• 任务结构更清晰，便于维护和扩展

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