Using Usemin within AngularJS partials

Question

I used Yeoman to scaffold an AngularJS project. I'm using the 'rev' task to help ensure that my images, scripts, styles, etc. are uniquely identified.

Within my AngularJS application, I have a template that is imported with the ng-include directive. My problem is that usemin is translating references within each file relative to the file it's translating, but when things get rendered they're pulled into my index.html and the browser pulls things in at a different relative path.

For example, I have a directory structure that looks like:

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

header.html will sometimes get pulled into index.html, and has a reference to images/logo.png.

if I put <img src="images/logo.png" /> in header.html, it loads properly on its own, but doesn't get translated by usemin.

If I put <img src="../images/logo.png" /> in header.html, usemin will find it and translate it, but it won't find the image once header.html gets pulled into index.html.

The usemin documentation says:

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]

The 'by default' language makes me think there's a way to tell it that relative paths should be relative to something other than the current file, but I haven't found any documentation telling me how to change that behavior.

Barm

Anything new about this? – Compliancy

Try /images/logo.png – Osullivan

Yeoman by itself means very little, its the specific yeoman generator that matters. Because you didn't specify which yeoman generator, I assumed the angular generator maintained my the Yeoman team. After initial setup, I ran grunt rev and found that there was not a rev target. Its hard to help when I don't know exactly which targets are running. – Jacintajacinth

Maybe some tasks change name from logo.png to logo.534534534.png and this task changes paths only in index.html. – Crossbred

Answer 1

You can explicitly declare asset directories (or just use absolute paths?).

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

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

Whitehorse