Grunt将angular度ui路由器模板连接成一个文件

我有一个有150个文件的angular-ui-router项目。 我想写一个咕噜的任务,把它们全部合并成一个index.html像这样:

 <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> ... 

我正在考虑使用https://github.com/outaTiME/grunt-replace,但我想尽可能做到这一点。

我目前的想法:

的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/'} ] } } 

这不是DRY,因为我必须在两个文件中重复150次的@@path-to-file-1.html 。 有没有办法只在index.html中写入它,并有咕task任务自动“暗示”匹配string将是文件名(当然以及replace- /path)?

奖金 :如何扫描目录获取文件名并在index.html中连接它们? 我认为这是最好的解决scheme,所以我不必维护添加新的文件。也许这是另一个模块,我不知道?

不要把它们放在一个html文件中。 使用grunt(或者更容易的gulp)来创build一个templates.js文件,它会自动将html放入模板caching中。

例如,在我的项目中,我使用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')); }); 

这将创build一个包含标记的js文件,该文件在加载时放置到模板caching中。

我可能会迟到这一个,但这里是另一个插件,可以帮助您将angular模板合并到一个单一的HTML文件: https : //github.com/astik/grunt-angular-combine这里是一个例子:

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