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