如何在 Gulp 文件包含中的嵌套包含之间传递变量？

Question

我正在使用

gulp-file-include

构建 HTML 文件，但在嵌套包含文件之间传递变量时遇到了问题。

文件结构：

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

问题： 我想将变量（nav）从index.html传递到header.html，然后将其从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：

<!-- I want to pass the nav variable to this file -->
<p>Navigation: @@nav</p>
<!-- Passing nav to headerMenuList.html -->
@@include('./headerMenuList.html', { "nav": nav })

headerMenuList.html：

<!-- Trying to access nav variable here -->
<p>Current Navigation: @@nav</p>

我尝试过的： 直接变量传递：使用

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

但会抛出 JSON5 错误。 字符串插值：尝试在

<%= nav %>

内使用

header.html

，但它输出

<%= nav %>

作为字符串而不是值。 直接字符串测试：当我将其更改为

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

时，它起作用，表明变量未正确传递。 问题： 是否可以在 gulp-file-include 中的嵌套包含文件之间传递变量？如果是这样，正确的方法是什么？如果没有，是否有解决方法或替代方法可以用来实现此目的？

Answer 1

您在 gulp-file-include 中遇到的问题是它如何处理嵌套文件中的变量和范围。不幸的是，gulp-file-include 本身并不支持在多个嵌套包含之间传递变量，就像您尝试做的那样。

解决方法： 虽然 gulp-file-include 不会通过嵌套包含自动传播变量，但有一个解决方法，您可以在每个步骤中手动传递变量。以下是调整代码的方法：

• 直接将变量从index.html传递到header.html。
• 然后，手动将相同的变量从 header.html 传递到 headerMenuList.html.

这样，您将在每个包含点显式传递 nav 变量。

例如：

index.html

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

标题.html

<!-- Display the "nav" variable in header.html -->
<p>Navigation: @@nav</p>

<!-- Pass the same "nav" variable to headerMenuList.html explicitly -->
@@include('./headerMenuList.html', { "nav": @@nav })

headerMenuList.html:\

<!-- Access the "nav" variable in headerMenuList.html -->
<p>Current Navigation: @@nav</p>