我有一个 angular-ui-router 项目，其中有 150 个文件。我想编写一个 grunt 任务将它们全部合并到一个 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，因为我必须在两个文件中重复@@path-to-file-1.html 150 次。有没有办法只将其写在index.html中，并让grunt任务自动“暗示”匹配字符串将是文件名(当然，将 - 替换为 / 路径)？
奖励:如何扫描目录以获取文件名并将它们连接到 index.html 中？我认为这是最好的解决方案，因此我不必维护添加新文件。也许这是我不知道的另一个模块？
最佳答案
不要将它们放入 html 文件中。使用 grunt(或者更简单的 gulp)创建一个 templates.js 文件，该文件会自动将 html 放入模板缓存中。
例如，在我的项目中我使用 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'));
});
这将创建一个包含标记的 js 文件，加载时将其放入模板缓存中。
关于javascript - Grunt 将 Angular ui 路由器模板连接到一个文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25844447/