Compiling all shtml files into one html file using SSI or grunt

Question

I am trying to build a live styleguide for an existing project. As part of this I would like to include all the shtml widgets I have in one folder into a single html file.

The type of solution I am looking for would follow this kind of behaviour:

1. Search through all files in a widgets folder
2. Compile all the files into a single html page
3. Use the name of the file as a title above each included widget

The project is running with both grunt and SSIs through an express server, so there are a couple of options I guess.

I have found this package which does grunt includes, however much of this is above my level of knowledge, so I have failed to get anything to work.

This is the code I have so far for my grunt file:

includes: {
  files: {
    src: ['widgets/.shtml'], // Source files
    dest: 'kitchen-sink', // Destination directory
    flatten: true,
    cwd: '.',
    options: {
      silent: true,
      banner: '<!-- I am a banner <% includes.files.dest %> -->'
    }
  }
}

I can see how this might work with a single, named file, but to loop through a folder seems a much harder task.

Any suggestions for a possible solution are gladly welcome.

Answer 1

In the end I used the suggestion from Qualcuno to use grunt-html-build. This works very well, I will potentially write another grunt task to write in the titles for the widgets on the page.

This was my final code:

htmlbuild: {
    dist: {
        src: 'kitchen_sink/kitchen-sink.shtml',
        dest: 'prod/kitchen_sink/kitchen-sink.shtml',
        options: {
            sections: {
                views: 'prod/templates/widgets/**/*.shtml',
                templates: 'prod/templates/widgets/**/*.shtml'
            }
        }
    }
}