如何在gulp-file-include的嵌套引入中正确传递变量？

问题概述 #

使用gulp-file-include构建HTML时，尝试从index.html传递nav变量到header.html，再传递到headerMenuList.html，触发JSON5解析错误。

文件结构 #

.
├── index.html
└── template-parts
    └── common
        ├── header.html
        └── headerMenuList.html

错误信息 #

[21:14:05] Starting 'htmlConcat'...
[21:14:05] 'htmlConcat' errored after 11 ms
[21:14:05] Error in plugin "gulp-file-include"
Message:
    JSON5: invalid character 'a' at 1:11
Details:
    domainEmitter: [object Object]
    domainThrown: false

相关代码 #

index.html #

<!-- siteHeader -->
@@include('template-parts/common/header.html', { "nav": "about" })

header.html #

<!-- 我想要将nav变量传递到该文件 -->
<p>Navigation: @@nav</p>
<!-- 将nav传递到headerMenuList.html -->
@@include('./headerMenuList.html', { "nav": nav })

headerMenuList.html #

<!-- 尝试在此处访问nav变量 -->
<p>Current Navigation: @@nav</p>

已尝试方法 #

• 直接变量传递：使用@@include('./headerMenuList.html', { "nav": nav })，触发JSON5错误。
• 字符串插值：尝试在header.html中使用<%= nav %>，输出字符串而非变量值。
• 直接使用@@nav：尝试@@include('./headerMenuList.html', { "nav": @@nav })，仍出现相同错误。
• 直接字符串测试：改为@@include('./headerMenuList.html', { "nav": "about" })可正常运行，说明变量传递方式有误。

解决方案 #

可以在gulp-file-include中实现嵌套变量传递，正确写法是将传递的变量用双引号包裹，并保留@@前缀：

修改header.html中的include语句为：

@@include('./headerMenuList.html', { "nav": "@@nav" })

原理：gulp-file-include会先解析@@nav，将其替换为index.html传递的"about"，最终生成合法的JSON参数{ "nav": "about" }，避免JSON5解析错误。

替代方案 #

如果上述方式无法满足复杂场景需求，可考虑以下方案：

1. 使用其他模板引擎：比如配合gulp-handlebars、gulp-ejs等插件，这类引擎原生支持更灵活的变量传递和嵌套模板逻辑。
2. 全局变量注入：通过gulp-data插件将全局变量注入到所有模板文件中，无需手动逐层传递。
3. 预处理变量：在gulp任务中提前处理变量，将需要传递的值统一注入到模板上下文。

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