Yeoman/Grunt usemin subfolders

Question

I'm having a horrible time using yeoman/grunt and usemin - trying to get output files to work at the same time as writing the correct path inside the html, when I have subfolders.

My basic set up is that there are top level pages (eg. index.html) and also language specific pages in sub folders (en, de, fr etc.) - each of those will have common js files (like jquery) but also language specific js files (same for css, but keeping it simple...)

– Gruntfile.js
– app
    |– index.html
    |– js
        jquery.js
            |– en
                english.js
            |– de
                german.js
    |– css
    |– en
        |– index.html
    |– de
        |– index.html
– dist

So basically - there is the top level index.html which has jquery etc. - So the script tag in there might look like

<script src="js/jquery.js"></script>

or with rev

<script src="js/123.jquery.js"></script>

But in en/index.html the script tag should look like (for common - like jquery)

<script src="../js/jquery.js"></script>

or with rev.

<script src="../js/123.jquery.js"></script>

It's the ../ that is the trouble.

I can get the js file built but not rev'd, or rev'd but empty, or build and rev'd but in the wrong location (most often outside/above both the app and dist folders!)

In the en/index.html - I just can't work out what the build:js should look like eg.

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

<!-- build:js js/en/english/jquery.js -->
<script src="../js/en/english.js"></script>
<!-- endbuild -->

I've tried every combinition I can think of - it seems to boil down to if I write a ../ in the build:js path, then the actual file is place 1 level up from the app folder, but writes the path in the html correctly. If I leave the ../ out, it puts the file in the right place, but the html doesn't have the ../ in either (which it clearly needs) - so how do I say that I want the output file to reference one level up (out of en/ folder) but have grunt not put it one level up (outside dist folder!)

Thanks!

Answer 1

I ran into a very similar problem. I was hosting my grunt-generated site on S3 using their static website option. Locally, the usemin generated content was working perfectly (with absolute paths), but since I had the site in a bucket on S3, it need the full absolute path (with domain) to the asset files to actually work.

Enter grunt-replace. Using a search/replace pattern was the only way I found to actually get this accomplished. For me, I just needed to replace "/assets/" with "http://s3domain.com/bucket/site-name/assets/". Here's my grunt task definition:

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: /\/assets\//,
          replacement: 'http://s3domain.com/bucket/site-name/assets/'
        }
      ]
    },
    files: [
      {
        expand: true,
        src: ['dist/**/*.html']
      }
    ]
  }
}

I've added that to my deploy task so that it only runs right before I'm about to push to S3.

For your cases, you could probably let usemin do its thing, then only replace files in subdirectories (like en or es) and change the asset paths to have ../ before them.