gulp-ejs能否实现动态传值？纯Gulp静态项目如何给引入的组件传参

• 第一步：引入组件时传入自定义参数
  ejs 的 include 语法本身支持传入第二个参数作为组件内部可用的变量，无需依赖express等后端框架，gulp-ejs静态编译阶段即可识别处理。
  将你的引入写法调整为如下格式，按需传入自定义变量即可：

<%- include('../components/buttons/_success', { btnText: '导航栏提交', customClass: 'nav-operate-btn' }) %>

你可以根据需求传入任意多个变量，比如按钮禁用状态、跳转链接等。

• 第二步：修改组件文件内部的静态内容
  打开你的 ../components/buttons/_success.ejs 组件文件，将原本写死的静态文本替换为对应变量占位符，还可以设置默认值避免未传参时报错：
  原静态组件写法示例：

<button class="btn btn-success">确定</button>

修改后支持动态参数的写法：

<button class="btn btn-success <%= customClass || '' %>">
  <%= btnText || '默认确认文本' %>
</button>

如果需要传入更多动态属性，也可以对应扩展，比如支持禁用状态：

<button 
  class="btn btn-success <%= customClass || '' %>"
  <%= disabled ? 'disabled' : '' %>
>
  <%= btnText || '默认确认文本' %>
</button>

引入时就可以对应传参：

<%- include('../components/buttons/_success', { btnText: '禁用按钮', disabled: true }) %>

• 第三步：无需额外调整gulp配置
  上述能力是ejs模板原生支持的语法，只要你当前的gulp任务是正常使用gulp-ejs渲染ejs模板生成静态HTML，不需要修改任何gulp配置，重新执行构建任务即可生成对应动态内容的静态页面。

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