Grunt usemin task not updating nested relative paths correctly

Question

I have a Yeoman project scaffolded with 'webapp-generator' which contains a static website with nested HTML files, resembling this structure:

-root/
  index.html
    -directory/
       file1.html
    -directory2/
       file2.html
    -js/
       (revved .js files)
    -css
       (revved .css files)

I'm using usemin and filerev tasks to update the filerevved file paths on the .html documents. It updates all file names correctly on js/css/images and it works correctly on the root index.html. However, on the nested HTML files, it doesn't replace the reference to the correct nested path.

For example.

js/scripts.js gets renamed to js/827385.scripts.js

In index.html

<scripts src="js/scripts.js"></scripts>

resolves to: <scripts src="js/827385.scripts.js"></scripts>

But in directory/file1.html (or any other nested html file)

<scripts src="../js/scripts.js"></scripts>

gets also converted to: <scripts src="js/827385.scripts.js"></scripts>

Ignoring the ../ relative path

---

Is there any way to tweak the Grunt tasks to be aware of the relative depth of the file within the directories to keep the relative indicator ../ in the renamed path?.

Below is the code snippet for the relevant Grunt tasks.

PS: I have already followed some of the possible answers in this Stack Overflow question: How should I configure grunt-usemin to work with relative path to no avail.

     // Renames files for browser caching purposes
    rev: {
        dist: {
          files: {
            src: [
              '<%= config.dist %>/scripts/{,**/}*.js',
              '<%= config.dist %>/styles/{,**/}*.css',
              '<%= config.dist %>/images/{,**/}*.*',
              '<%= config.dist %>/styles/fonts/{,**/}*.*',
              '<%= config.dist %>/*.{ico,png}'
            ]
          }
        }
      },

      // Reads HTML for usemin blocks to enable smart builds that automatically
      // concat, minify and revision files. Creates configurations in memory so
      // additional tasks can operate on them
      // <%= config.dist %>
      useminPrepare: {
        options: {
          dest: 'out',
          // root: '<%= config.app %>'
        },
        html: '<%= config.app %>/index.html'
          // root: '<%= config.app %>'
      },

      // Performs rewrites based on rev and the useminPrepare configuration
      usemin: {
        options: {
          assetsDirs: [
            '<%= config.dist %>',
            '<%= config.dist %>/images',
            '<%= config.dist %>/styles'
          ]
        },
        html: ['<%= config.dist %>/**/*.html'],
        css: ['<%= config.dist %>/styles/**/*.css']
      },

Answer 1

In my case I've found out that the problem was usemin configuration in the html files:

If you have in your index.html this usemin directive:

<!-- build:js styles/jquery.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->

In directory/file1.html you should try to use a full path in it:

<!-- build:js /scripts/jquery.js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild-->

which will be converted to something like <script src="/scripts/jquery.34ad31c3.js"></script>.