在AngularJS局部页面中使用Usemin

Question

我使用Yeoman来脚手架一个AngularJS项目。我正在使用“rev”任务来确保我的图片、脚本、样式等都有唯一的标识。

在我的AngularJS应用程序中，我有一个模板，是通过ng-include指令导入的。我的问题是usemin将每个文件中的引用相对于正在翻译的文件进行翻译，但当事物被呈现时，它们被拉到我的index.html中，并且浏览器以不同的相对路径拉取事物。

例如，我有一个目录结构如下：

index.html templates/header.html images/logo.png

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

如果我在header.html中放置，它可以单独正确加载，但不会被usemin翻译。

如果我在header.html中放置，usemin将找到它并翻译它，但一旦header.html被拉入index.html中，它就无法找到该图像。 usemin文档说：

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

“默认情况下”的语言让我想到有一种方法可以告诉它相对路径应该相对于除了当前文件之外的其他东西，但我没有找到任何文档告诉我如何更改该行为。

- Austin Roberts

---

有关这个的最新情况吗？ - TrtG

尝试 /images/logo.png - Sergey Romanov

Yeoman本身并没有太多意义，关键是具体的Yeoman生成器。因为您没有指定使用哪个Yeoman生成器，我假设您使用的是由Yeoman团队维护的Angular生成器。在初始设置完成后，我运行了grunt rev命令，发现没有rev目标。如果我不知道确切运行哪些目标，很难提供帮助。 - Joel Jeske

也许有些任务将名称从logo.png更改为logo.534534534.png，而此任务仅在index.html中更改路径。 - changtung

Answer 1

您可以明确声明资产目录（或者只需使用绝对路径？）。

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

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

- mlibby