How should I configure grunt-usemin to work with relative path

Question

I have a grunt project backed by a yeoman-generator that I\'ve built based on the generator-webapp, if it\'s of any help, you can find it on GitHub

The grunt project mak

Answer 1

I used multiple targets as shown below:

 useminPrepare: {
        target1 : {
                src : ['target1/*.html'],
                options : {
                    dest: 'out'
                }
            },

            target2 : {
                src : ['target2/folder/*.html'],
                options : {
                    dest: 'out/subfolder'
                }
            }
    },

Then in the HTML block you could this:

<!-- build:js ../subfolder/script.js -->
<script src="../subfolder/scripts/main.js></script>
<!-- endbuild -->

Answer 2

If I'm understanding your question correctly I think you need the 'root' option:

{
  useminPrepare: {
    html: 'html/index.html',
    options: {
    root: 'app'
    dest: 'dist'
    }
  }
}

Though index.html is in the html/ folder the files lookup will be from app/ not html/

Answer 3

My solution was to manually modify grunt-usemin plugin.

Open node_modules/grunt-usemin/fileprocessor.js in you favourite text editor. Somewhere around line 152 find:

if (assetSearchPath && assetSearchPath.length !== 0) {
  this.file.searchPath = assetSearchPath;
}

and replace it with:

if (assetSearchPath && assetSearchPath.length !== 0) {
  this.file.searchPath.splice(0, 0, assetSearchPath);
}

By default this.file.searchPath is an array containing the absolute path to the current file. There's no point in overwriting it with ['dist'], it's better to prepend the array with 'dist'. This way if an item is not found in 'dist' directory it might be concluded that either the path is relative or it's wrong. Thus we use the second value from the searchPath array to look for the file and if it was a relative path - we get what we wanted.