如何通过函数式编程消除 Gulp 任务中的重复逻辑

本文介绍如何利用 javascript 闭包与柯里化技术，将重复的 gulp nunjucks 渲染任务抽象为可复用的高阶函数，避免硬编码路径、提升代码可维护性与扩展性。

本文介绍如何利用 javascript 闭包与柯里化技术，将重复的 gulp nunjucks 渲染任务抽象为可复用的高阶函数，避免硬编码路径、提升代码可维护性与扩展性。

在构建现代前端工作流时，Gulp 仍被广泛用于模板编译、资源优化等自动化任务。但随着项目规模扩大，类似 genNunJucks 和 genNunJucks2 这样的重复任务极易滋生——仅因源路径（paths.views.src / paths.views.src2）和输出目标（dest）不同，却需维护两套几乎完全相同的管道逻辑。这不仅违背 DRY（Don’t Repeat Yourself）原则，更增加后续调试与升级成本。

核心思路：使用高阶函数实现任务参数化
与其复制粘贴整个任务函数，不如将其封装为一个“工厂函数”：接收差异化参数（如源路径、目标路径），返回定制化的 Gulp 任务函数。这正是闭包（保留外部作用域变量）与柯里化（预设部分参数）的典型应用场景。

以下是重构后的专业实践方案：

// ✅ 高阶函数：生成 Nunjucks 渲染任务 function createNunjucksTask({ srcPath, destPath }) {   return function genNunJucks(cb) {     return src(srcPath)       .pipe(         nunjucksRender({           path: ['src/views/'],           ext: '.html',           inheritExtension: false,           envOptions: { watch: true },           manageEnv: manageEnvironment,           loaders: null,         })       )       .pipe(         htmlbeautify({           indentSize: 2,           eol: 'n',           indent_level: 0,           preserve_newlines: false,         })       )       .pipe(dest(destPath))       .on('end', cb) // 确保异步完成回调正确触发       .on('Error', cb); // 避免错误导致任务挂起   }; }  // ✅ 按需创建具体任务 exports.genNunJucks = createNunjucksTask({   srcPath: paths.views.src,   destPath: paths.views.dest, });  exports.genNunJucks2 = createNunjucksTask({   srcPath: paths.views.src2,   destPath: paths.views.dest2, });  // ✅ 扩展性示例：轻松新增第三个视图任务 exports.genNunJucksAdmin = createNunjucksTask({   srcPath: paths.views.adminSrc,   destPath: paths.views.adminDest, });

⚠️ 关键注意事项

• 必须显式处理 cb() 回调：Gulp v4+ 要求明确告知任务何时完成。推荐使用 .on(‘end’, cb) 和 .on(‘error’, cb) 替代裸调 cb()，确保管道异常时也能终止任务。
• 避免闭包陷阱：若用 for 循环批量生成任务，请用 let 声明迭代变量或立即执行函数（IIFE），防止所有任务共享同一 srcPath 值。
• 配置复用更进一步：可将 nunjucksRender 和 htmlbeautify 的通用配置提取为常量，使高阶函数更简洁。
• 类型安全提示：在 typescript 项目中，建议为 { srcPath, destPath } 添加接口定义，提升可读性与 ide 支持。

这种函数式设计不仅彻底消除了重复代码，还让任务职责更单一、配置更集中、扩展更直观——当新增视图目录时，只需一行配置即可生成新任务，无需触碰任何底层渲染逻辑。这才是自动化构建脚本应有的可维护性与工程严谨性。