如何将 gulp 模板代码与下划线模板代码分开？

Question

我正在使用 gulp 构建我的项目，我的部分项目使用了 Underscore 模板。我在构建过程中使用的插件之一是 gulp-template，它使用 Lodash 模板。

是否可以指示当我使用 gulp 时应呈现哪些代码，以及哪些代码应在模板中忽略？

例如，我有一个包含以下内容的文件：

<script src="<%= image_server_url %>/scripts/iep-alert/alert-content.js"></script>

在构建期间，我希望 image_server_url 被渲染。然而，在我项目的其他地方，我有这段代码，我想被 gulp-template 插件忽略：

<%
    if(alert.disability === "true") {
%>
    <li><span style="font-weight: bold;">Disability: </span><%= alert.disability %></li>
<%
    }
%>

现在，当我调用调用 gulp-模板的 gulp 任务时，我得到 ReferenceError: alert is not defined 因为 gulp-模板的上下文不包括alert -- 只有 image_server_url 是 gulp-模板上下文的一部分。

编辑：我编辑了我的代码以匹配 {{ image_server_url}}，并将我对 gulp-template 的调用更改为如下所示：

template({
    image_server_url: config.dev.image_server_url
}, {
    interpolate: /{{([\s\S]+?)}}/g
})

通过这些更改，当我运行我的 build 任务时，我认为 gulp-template 仍在尝试运行在 <% 和 %> 块，因为我得到这个错误：

window is not defined

它试图在第一个 <% JS block %>

中运行的代码

<%
    if (window.location.href.indexOf('admin') != -1) {
%>

如果有人能解决这个特定问题，那就太好了。我想现在我要研究一个替代解决方案。

Answer 1

我找不到合理的方法来执行此操作，因为您想解析 same 模板 twice，只有一些字符串必须在 gulp 中插入，其他在浏览器中插入。

一个建议是使用_.templateSettings，这样在gulp处理的时候，可以使用另一种模板格式。

例如 gulp，您可以设置：

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;

在您的模板中：

<script src="{{ image_server_url }}/scripts/iep-alert/alert-content.js">

因此，当模板打算由 gulp 处理时，使用 {{}} 插值语法，当它打算在浏览器端处理时，使用默认的 (erb) <%= %>语法。

Answer 2

我最终使用了 gulp-preprocess 插件。我的代码现在看起来像这样，到目前为止运行良好。

<script src="<!-- @echo IMAGE_SERVER_URL -->/scripts/iep-alert/alert.js"></script>

How can I separate gulp-template code from underscore template code?