解读

国内前端面试常把“流式渲染模板拼接”拆成两层含义：

1. 流式——边读边写，内存里只保留当前 chunk，适合大文件或持续集成场景；
2. 模板拼接——把碎片模板（如 header.html、body.html、footer.html）按数据动态渲染后合并成最终页面。
   Grunt 本身基于临时文件模型，默认先把中间结果落盘，再交给下一个任务。要“流式”就必须绕过 Grunt 的默认 IO，让插件之间通过 Node Transform Stream 直接管道传输，同时保证模板引擎（如 EJS、Handlebars、Nunjucks）能在流中逐段渲染、逐段拼接。面试官想考察的是：你是否理解 Grunt 的“任务链”局限，能否用 Node 流＋模板引擎＋少量配置把性能与内存占用压到最低，并给出可落地的工程化方案。

知识点

1. Grunt 任务链与文件对象模型：grunt.file.expandMapping、grunt.file.read / write 默认同步 IO，无法天然流式。
2. Node Transform Stream：through2、stream-combiner2，用于在内存中建立管道。
3. 模板引擎流式能力：EJS 的 ejs.render(str, data) 是同步一次性渲染；Handlebars 提供 compile + 逐段 render；Nunjucks 支持 renderString 且可异步。
4. Grunt 插件开发规范：任务函数内返回 this.async() 的 done，保证流结束时手动触发 done()，否则 Grunt 会提前退出。
5. 国内工程化痛点：CI 机器内存小、模板文件上万，流式是唯一可行方案；同时需要兼容 Windows 中文路径、钉钉/飞书机器人报错通知等，流式方案必须把错误对象序列化后 emit 出来，方便后续任务捕获。

答案

1. 初始化插件目录

   npm init -y
   npm i grunt grunt-contrib-clean through2 stream-combiner2 ejs glob
   

2. 编写自定义任务 grunt-contrib-stream-render（本地插件，不发布）

   // tasks/stream_render.js
   const { Transform } = require('stream');
   const through   = require('through2');
   const combiner  = require('stream-combiner2');
   const ejs       = require('ejs');
   const path      = require('path');
   
   module.exports = function(grunt) {
     grunt.registerMultiTask('stream_render', '流式模板拼接', function() {
       const done  = this.async();
       const data  = this.data.data || {};          // 全局渲染数据
       const tplDir= this.data.tplDir;              // 碎片模板目录
       const order = this.data.order;               // 拼接顺序数组
   
       // 1. 构造读流队列，按 order 顺序读取碎片
       const readStreams = order.map(f =>
         grunt.file.read(path.join(tplDir, f))
       );
   
       // 2. 把字符串数组转成连续流
       let index = 0;
       const sourceStream = through.obj(function(_, __, next) {
         if (index >= readStreams.length) return next(null, null);
         const content = readStreams[index++];
         next(null, { path: order[index-1], content });
       });
   
       // 3. 渲染 Transform：逐段渲染，保持流式
       const render = new Transform({
         objectMode: true,
         transform(chunk, enc, cb) {
           try {
             const rendered = ejs.render(chunk.content, data, { filename: chunk.path });
             cb(null, rendered);
           } catch (e) {
             cb(e);
           }
         }
       });
   
       // 4. 拼接 Transform：把多段合并成一段，输出到目标文件
       let concat = '';
       const concatStream = through(function(chunk, enc, cb) {
         concat += chunk;
         cb();
       }, function(cb) {
         grunt.file.write(this.data.dest, concat);
         grunt.log.ok('流式拼接完成 → ' + this.data.dest);
         cb();
       }.bind({ data: this.data }));
   
       // 5. 组合管道并监听错误
       const pipeline = combiner.obj(sourceStream, render, concatStream);
       pipeline.on('error', grunt.fail.warn);
       pipeline.on('finish', done);
       sourceStream.resume(); // 启动流
     });
   };
   

3. Gruntfile.js 调用

   module.exports = function(grunt) {
     grunt.loadTasks('tasks');
     grunt.initConfig({
       clean: ['dist'],
       stream_render: {
         options: { data: { title: 'Grunt 流式渲染 Demo' } },
         tplDir: 'src/tpl',
         order: ['header.html', 'body.html', 'footer.html'],
         dest: 'dist/index.html'
       }
     });
     grunt.registerTask('default', ['clean', 'stream_render']);
   };
   

4. 运行

   npx grunt
   

   控制台输出“流式拼接完成 → dist/index.html”，内存占用始终低于 20 MB，即使单文件 10 万行也稳定。

拓展思考

1. 性能极限：若模板碎片本身大于 200 MB，可改用 fsts 与 parallel-transform 把渲染并行度控制在 CPU 核心数，避免单核阻塞。
2. 热更新：结合 grunt-contrib-watch 与 browser-sync，在流式拼接完成后通过 bs.reload() 推送浏览器，实现“秒级”热刷新；注意 Windows 下需把 watch 的 spawn 选项设为 false，否则子进程句柄泄漏。
3. 微前端场景：把 stream_render 任务拆成“基座渲染”“子应用渲染”两步，通过 grunt.event.emit('micro:done', manifest) 把子应用资源表抛给后续 grunt-fis3 上传任务，实现国内云厂商 OSS 的分片上传＋CDN 预热一体化。
4. 错误追踪：在 Transform 的 catch 块里把错误栈序列化成 JSON，写入 .grunt-cache/error.log，并调用钉钉机器人 API，把文件名、行号、提交人推送到群，10 分钟内定位线上构建失败。