3

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>
Craig Celeste
  • 12,207
  • 10
  • 42
  • 49
  • [grunt-include-source](https://github.com/jwvdiermen/grunt-include-source) does that sort of thing for css and js, but I don't know if it will inject anchor tags like that. It might be a start or a good term to use for new searches. – Matthew Bakaitis May 01 '14 at 05:27
  • That was perfect! You should make it an answer and I'll accept it. – Craig Celeste May 01 '14 at 16:39

1 Answers1

4

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.

Community
  • 1
  • 1
Matthew Bakaitis
  • 11,600
  • 7
  • 43
  • 53