如何使用 grunt 任务在 html 中生成文件列表？答案

【问题标题】：How do I generate a list of files in html, using a grunt task?如何使用 grunt 任务在 html 中生成文件列表？
【发布时间】：2014-06-17 14:26:34
【问题描述】：

我正在使用 yeoman、grunt 和 angularjs，并且是 grunt 的新手。

我有一些生成类似这样的内容，已经复制到 dist 文件夹。

/dist/whatever/x/a.html
/dist/whatever/y/b.html
/dist/whatever/x/c.html

我想使用 grunt 任务创建另一个 html 文件：

/dist/whatever/index.html

其中包含：

...
<a href="x/a.html">x</x>
<a href="y/b.html">x</x>
<a href="x/c.html">x</x>
...

这个 html 文件可以作为模板存在于我的 /app 文件夹中，并且可以用 grunt 替换一些标记。

是否存在执行类似操作的现有模块（查找与模式匹配的文件并将它们写入现有内容）？

基于 Matt 的评论使用 grunt-include-source 的解决方案：

Gruntfile.js：

includeSource: {
  options: {
    basePath: 'dist/whatever',
    baseUrl: '',
    templates: {
      html: {
        link: '<li><a href="{filePath}">{filePath}</a></li>'
      }
    }
  },
  whateverIndex: {
    files: {
      'dist/whatever/index.html': 'app/whatever/index.template.html'
    }
  }
},

app/whatever/index.template.html

<ul>
<!-- include: "type": "link", "files": "*/index.html" -->
</ul>

【问题讨论】：

grunt-include-source 为 css 和 js 做那种事情，但我不知道它是否会注入这样的锚标签。对于新的搜索，这可能是一个开始或一个好的术语。
太完美了！你应该把它作为一个答案，我会接受它。

标签： gruntjs

【解决方案1】：

grunt-include-source 可用于在 HTML 中构建引用目录中的 css、js 和 HTML 文件或匹配 glob 的部分。

docs on github 很好地概述了任务的配置和工作方式。

此外，the answer 这个其他问题提供了更多信息。

【讨论】：