angularjs - 在 AngularJS 部分中使用 Usemin

Question

我使用 Yeoman 搭建了一个 AngularJS 项目。我使用“rev”任务来帮助确保我的图像、脚本、样式等得到唯一标识。

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

例如，我的目录结构如下所示:

• index.html
• templates/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 文档说:

When the reference is relative, by default the referenced item is looked in the path relative to the current file location in the destination directory [emphasis mine]

“默认”语言让我认为有一种方法可以告诉它相对路径应该相对于当前文件以外的其他内容，但我还没有找到任何文档告诉我如何更改该行为。

Answer 1

您可以显式声明资源目录(或仅使用绝对路径？)。

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

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