本文介绍如何利用 javascript 高阶函数（闭包 + 函数工厂）将多个结构相同、仅路径不同的 gulp 构建任务抽象为单一可复用函数，避免代码重复，提升 gulpfile.js 的可维护性与扩展性。
本文介绍如何利用 javascript 高阶函数（闭包 + 函数工厂）将多个结构相同、仅路径不同的 gulp 构建任务抽象为单一可复用函数，避免代码重复，提升 gulpfile.js 的可维护性与扩展性。
在 Gulp 项目中，当需要对多个视图目录（如 src/views/home/ 和 src/views/blog/）分别执行相同的 Nunjucks 渲染流程时，若为每个目录单独编写一个任务函数（如 genNunJucks 和 genNunJucks2），会导致大量重复逻辑——不仅违反 DRY（Don’t Repeat Yourself）原则，还增加后续维护成本（例如修改模板引擎配置时需同步更新多处）。
理想的解决方案是：将“可变部分”（源路径、目标路径）参数化，把“固定部分”（渲染、美化、输出）封装为可复用逻辑。这正是高阶函数（Higher-Order Function）的典型应用场景：一个函数接收参数并返回另一个定制化的任务函数。
✅ 推荐做法：使用函数工厂（Function Factory）
我们定义一个工厂函数 createNunjucksTask，它接收 srcPath 和 destPath 作为参数，并返回一个符合 Gulp 4+ 任务签名（接受 cb 或返回 stream）的函数：
const { src, dest } = require('gulp');
const nunjucksRender = require('gulp-nunjucks');
const htmlbeautify = require('gulp-html-beautify');
// 工厂函数：生成专属 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); // 错误时传递给 Gulp
};
}
// 使用示例：为不同视图路径创建独立任务
exports.genHome = createNunjucksTask(paths.views.src, paths.views.dest);
exports.genBlog = createNunjucksTask(paths.views.src2, paths.views.dest2);? 关键点说明：
- createNunjucksTask 是纯函数，不依赖外部状态，易于测试与复用；
- 返回的任务函数自动捕获传入的 srcPath/destPath（闭包机制），无需在调用时重复传递；
- .on('end', cb) 和 .on('error', cb) 确保 Gulp 正确识别异步完成时机（Gulp 4+ 推荐方式，比直接调用 cb() 更健壮）。
? 进阶：批量注册任务（支持数组路径）
若需对 paths.views.srcList = ['src/views/home/', 'src/views/blog/', 'src/views/about/'] 批量生成任务，可进一步封装：
function registerNunjucksTasks(configs) {
configs.forEach((cfg, index) => {
const taskName = `genView${index + 1}`;
exports[taskName] = createNunjucksTask(cfg.src, cfg.dest);
});
}
// 批量注册
registerNunjucksTasks([
{ src: paths.views.src, dest: paths.views.dest },
{ src: paths.views.src2, dest: paths.views.dest2 },
{ src: 'src/views/about/', dest: 'dist/about/' }
]);⚠️ 注意事项
- 不要直接在工厂内调用 cb()：原问题代码中 cb() 被无条件执行，但实际应由 stream 的 'end' 或 'error' 事件触发，否则 Gulp 可能提前结束任务；
- 路径变量需已定义：确保 paths.views.src 等配置在调用前已正确初始化（建议统一管理于 config.js）；
- Gulp 版本兼容性：上述写法适用于 Gulp 4+；若使用 Gulp 3，请改用 return + cb 混合模式（不推荐，建议升级）；
- 性能考量：每个任务仍独立执行（非并发），如需并行构建，可用 gulp.parallel(...Object.values(exports)) 组合。
通过函数工厂模式，你不仅消除了重复代码，更将构建逻辑从“硬编码”升级为“可配置服务”，为未来接入更多模板引擎（如 Handlebars、EJS）或添加环境变量注入等能力预留了清晰的扩展接口。
