在AngularJS partials中使用Usemin

时间:2014-03-28 16:37:39

标签: angularjs gruntjs yeoman grunt-usemin

我使用Yeoman来构建一个AngularJS项目。我正在使用' rev'任务,以帮助确保我的图像,脚本,样式等唯一标识。

在我的AngularJS应用程序中,我有一个使用ng-include指令导入的模板。我的问题是usemin正在翻译每个文件中相对于它正在翻译的文件的引用,但是当事情被渲染时,它们被拉入我的index.html并且浏览器以不同的相对路径拉入内容。

例如,我的目录结构如下:

  • 的index.html
  • 模板/ header.html中
  • 图像/ logo.png

header.html有时会被拉入index.html,并且会引用images / logo.png。

如果我将<img src="images/logo.png" />放在header.html中,它会自行加载,但不会被usemin翻译。

如果我将<img src="../images/logo.png" />放入header.html,那么usemin会找到它并进行翻译,但一旦header.html被拉入index.html,就无法找到该图片。

usemin文档说:

  

当引用是相对的时,默认情况下,在相对于目标目录中当前文件位置的路径中查找引用的项目   [强调我的]

默认情况下&#39;语言让我觉得有一种方法可以告诉它相对路径应该与当前文件以外的其他路径相关,但我还没有找到任何文档告诉我如何改变这种行为。

1 个答案:

答案 0 :(得分:0)

您可以显式声明资产目录(或只使用绝对路径?)。

https://github.com/yeoman/grunt-usemin#assetsdirs

usemin: {
  html: 'templates/header.html',
    options: {
    assetsDirs: ['images']
  }  
}