如何使用grunt任务在html中生成文件列表？ [英] How do I generate a list of files in html, using a grunt task?

问题描述

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

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

我想创建另一个html文件一个咕task的任务：

  /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：{
asePath：'dist / whatever' ，
 baseUrl：''，
 templates：{
 html：{
 link：'< li>< a href ={filePath}> {filePath} < / li>< / li>'
} 
} 
}，
 whateverIndex：{
 files：{
'dist / whatever / index.html'：'app / whatever / index.template.html'
} 
} 
}，
  

app / whatever / index.template.html

 < ul> 
 <！ - 包含：type：link，files：* / index.html - > 
< / ul> 
  

解决方案

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

github上的文档提供了有关如何配置该任务的良好概述，作品。

另外，这个问题的答案提供了更多信息。

I am using yeoman, grunt and angularjs and am new to grunt.

I have some content generation that produces something like this, already copied to the dist folder.

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

I would like to create another html file using a grunt task:

/dist/whatever/index.html

Which contains:

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

This html file can exist in my /app folder as a template, and have grunt replace some tokens.

Is there an existing module that does anything like this (looking for files matching a pattern and writing them into existing content)?

---

solution based on Matt's comment to use 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 can be used to build sections in HTML that reference css, js and HTML files in a directory or that match a glob.

The docs on github provide a good overview of how the task is configured and works.

Additionally, the answer to this other question provides a little more info.

这篇关于如何使用grunt任务在html中生成文件列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！