Grunt to concatenate angular ui router templates into one file

I have an angular-ui-router project with 150 files all over the place. I want to write a grunt task to combine all of them into a single index.html like this:

<script type="text/ng-template" id="path-to-file-1.html">   
Content of file-1.html here </script>

<script type="text/ng-template" id="path-to-file-2.html">   
Content of file-2.html here </script>

<script type="text/ng-template" id="path-to-file-3.html">   
Content of file-3.html here </script>

...

I am thinking about using https://github.com/outaTiME/grunt-replace but I want to do this as DRY as possible.

My current thinking:

index.html

<body>
  @@path-to-file-1.html

  @@path-to-file-2.html

  @@path-to-file-3.html
</body>

gruntfile.js

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: 'path-to-file-1.html',
          replacement: '<%= grunt.file.read("path/to/file-1.html.html") %>'
        },
        {
          match: 'path-to-file-2.html',
          replacement: '<%= grunt.file.read("path/to/file-2.html.html") %>'
        },
        {
          match: 'path-to-file-3.html',
          replacement: '<%= grunt.file.read("path/to/file-3.html.html") %>'
        }
      ]
    },
    files: [
      {expand: true, flatten: true, src: ['src/index.html'], dest: 'build/'}
    ]
  }
}

This is not DRY as I have to repeat the @@path-to-file-1.html for 150 times in both files. Is there a way to write it in the index.html only and have grunt task to automatically "imply" that the match string will be the file name (well of course replace - with / for path)?

BONUS: How to scan the directories to get the filenames and concat them in index.html? I think this is the best solution so I don't have to maintain new file adding in. Maybe this is another module that I don't know?

Don't put them in an html file. Use grunt (or more easily gulp) to create a templates.js file which automatically places the html into the template cache.

For example, in my projects I use https://github.com/miickel/gulp-angular-templatecache

// create angular template js from html partials
gulp.task('templates', ['clean'], function(){
    var opts = { empty: true, spare: true, quotes: true };
    gulp.src('public/apps/myapp/**/*.html')
        //.pipe(minifyHTML(opts))
        .pipe(templateCache({ root: '/apps/myapp/' }))
        .pipe(gulp.dest('dist/myapp/js'));
});

This will create a js file that contains markup that is placed into the template cache on load.

I may be late on this one, but here is another plugin that can help you to merge angular template into a single HTML file : https://github.com/astik/grunt-angular-combine Here is an example :

grunt.initConfig({
  angularCombine: {
    combine: {
      files : [ {
        cwd : 'app/views',
        src : [ 'module1/foo.html', 'module2/woot.html', 'modules3/*.html' ],
        dest : 'tmp/combined-views.html'
      } ]
    }
  }
})