Yeoman/Grunt usemin subfolders

grunt-usemin, gruntjs, path, subdirectory, yeoman

Solution

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.

Problem

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!

Original source