Merge all files (CSS, JS, HTML) to one HTML with Grunt

Question

I have a specific project where all of the code (CSS, JS (Angular), HTML) must be in one giant HTML. I could manually copy all CSS and JS to index.hml but it is time consuming and prone to errors.

For some project I already use Grunt, so I was trying to use grunt-contrib-concat but it only merges files one under another. This doesn't really helps me, because the CSS should be in the sytle section in the header of the HTML, JS in the script section.

I read help on the github page, but there is no obvious solution.

I call the contac function like this:

 concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/styles/main.css', '<%= yeoman.app %>scripts/outro.js'],
      dest: 'dist/index.html',
    }
  }

This is only a test, and the result is not good for me.

Are here any place holders to tell the concat where to insert specific files?

Answer 1

In grunt we have a plugin

grunt.loadNpmTasks('grunt-contrib-concat');

This plugin concats all files which you specify.