grunt-usemin Relative path issue

Hi everyone,

I have asked this question on StackOverflow but got no answer or interest so far.

I've copied the question here for your convenience.

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, it's the generator-yawa (but the grunt-usemin part is really identical to the generator-webapp)

The grunt project makes us of the grunt-usemin task.

My project involve building a multilingual website, and to keep things clean, I've decided to put all the pages written in a language in a folder name after the 2-letter shortcode of the said language.

| project/
|--dist/
|----en/
|------index.html
|------404.html
|------...
|----fr/
|------index.html
|------404.html
|------...

The files are made from handlebars templates and processed with assemble. In the layout I have building blocks for usemin such as

    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="../styles/main.css">
    <!-- endbuild -->
    <!-- build:js scripts/vendor/modernizr.js -->
    <script src="../bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->

Which, in a perfect world would translate to

    <link rel="stylesheet" href="../styles/main.css">
    <script src="../scripts/vendor/modernizr.js"></script>

but instead shows

    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/vendor/modernizr.js"></script>

which is less than ideal in my case. The relevant part of the Gruntfile.js looks like this

        useminPrepare: {
            options: {
                dest: '<%= yeoman.dist %>'
            },
            html: [
                '<%= yeoman.app %>/fr/{,*/}*.html',
                '<%= yeoman.app %>/en/{,*/}*.html'
            ]
        },
        usemin: {
            options: {
                dirs: ['<%= yeoman.dist %>']
            },
            html: [
                '<%= yeoman.dist %>/fr/{,*/}*.html',
                '<%= yeoman.dist %>/en/{,*/}*.html'
            ],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
        }

I have tried to use the basedir option by setting it to <%= yeoman.dist %> as well as changing the build blocks to

    <!-- build:css(.tmp) ../styles/main.css -->
    <link rel="stylesheet" href="../styles/main.css">
    <!-- endbuild -->
    <!-- build:js ../scripts/vendor/modernizr.js -->
    <script src="../bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->

But unfortunately wasn't able to get a proper output.

More specifically, the first one didn't change anything, the second one had the folders scripts and styles outputted one level too high in the hierarchy

| project/
|--app/
|--dist/
|--styles/
|--scripts/

instead of

| project/
|--app/
|--dist/
|----styles/
|----scripts/

Would anyone happen to know what to do ? It seems a rather simple usecase but I couldn't find the help I need via Google, GitHub or SO...

Thanks for your help !

Sep 24 '13 07:09 p-j

What version of grunt-usemin are you using ?

Sep 27 '13 15:09 stephanebachelier

Same as generator-webapp : grunt-usemin": "~0.1.10",

Which in the project I'm working with right now translates to

{
  "name": "grunt-usemin",
  "version": "0.1.12",
  ...

Sep 27 '13 15:09 p-j

Maybe using grunt-usemin v2.0 with assetsDirs option could probably help. I've switched to v2.0 which is still beta because it works better with filerev, for me!

Stéphane Bachelier, B8A5 2007 0004 CDE4 5210 2317 B58A 335B B5A4 BFC2

2013/9/27 Jeremie Parker [email protected]

Same as generator-webapp https://github.com/yeoman/generator-webapp : grunt-usemin": "~0.1.10",

Which in the project I'm working with right now translates to

{ "name": "grunt-usemin", "version": "0.1.12", ...

— Reply to this email directly or view it on GitHubhttps://github.com/yeoman/grunt-usemin/issues/184#issuecomment-25254734 .

Sep 27 '13 16:09 stephanebachelier

Your are right, I should try that. Is there somewhere a list of the change of the 2.0, or a kind of migration guide ?

Sep 28 '13 09:09 p-j

2013/9/28 Jeremie Parker [email protected]

Your are right, I should try that. Is there somewhere a list of the change of the 2.0, or a kind of migration guide ?

I did not find one but the v2.0 readme is full of explanations and far more options than current stable version. And with some trials I've managed to found the correct options for my use case.

https://github.com/yeoman/grunt-usemin/blob/v2.0/README.md

—

Reply to this email directly or view it on GitHubhttps://github.com/yeoman/grunt-usemin/issues/184#issuecomment-25295093 .

Sep 28 '13 13:09 stephanebachelier

Ok, so I made some progress thanks to your help, but I'm still not able to get exactly what I want.

I have the same folder hierarchy as before, and I've updated to usemin v2.0 dev branch.

In my template I have a block like this one

<!-- build:js scripts/main.js -->
<script src='/bower_components/jquery/jquery.js'></script>
<script src='/scripts/plugins/jquery-placeholderText.js'></script>
<script src='/scripts/plugins/jquery-responsiveTables.js'></script>
<script src='/scripts/plugins/jquery-responsiveText.js'></script>
<script src='/scripts/plugins/jquery-truncateLines.js'></script>
<script src='/scripts/app.js'></script>
<!-- endbuild -->

and in my Gruntfile.js I have

        useminPrepare: {
            options: {
                root: '<%= yeoman.tmp %>',
                dest: '<%= yeoman.dist %>'
            },
            html: ['<%= yeoman.app %>/{fr,en,blog}/{,*/}*.html']
        },
        usemin: {
            options: {
                dirs: ['<%= yeoman.dist %>']
            },
            html: ['<%= yeoman.dist %>/{fr,en,blog}/{,*/}*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
        },

I'm setting root: '<%= yeoman.tmp %>', in the useminPrepare task because I have some coffee files and SCSS files that gets compiled into the temp folder, and for easing the process I've used grunt-contrib-copy to copy all the files that would normally be in app/styles or app/scripts in their respective app/.tmp counterparts.

At the end of the build, I have the desired result in term of files. They are correctly build and placed in the correct folder. The issue I still have though is that the URL that references the optimized file is not correct.

It seems the only choice I have is either src="scripts/main.js" or src="/scripts/main.js" but I can't have something like src="../scripts/main.js" and better: something that would adapt based on the file location relative to the dist/ folder.

So for instance if I was to have

| project/
|--dist/
|----blog/
|------index.html
|------2013/
|--------01/
|----------first-post-from-january.html
|--------02/
|----------a-post-from-february.html
|----------another-post-from-february.html
|----------...

I would still have the correct path in index.html and in first-post-from-january.html which would be src="../scripts/main.js" in the former and src=../../../scripts/main.js" in the later.

I know it wouldn't be an issue if I had dist as the root of my web server, unfortunately it's not guarantee and I'd rather have a more flexible solution.

Another question which is not directly related : can I pass only one HTML file to useminPrepare and still have usemin process all of them, provided all the needed blocks are referenced in that first HTML files ?

Thanks for your help.

Oct 03 '13 11:10 p-j

:+1:

I think having the target output relative to the html file would be less confusing. Or at least, making this as an option.

Actually it seems to be relative to the folder referenced by the dest option of useminPrepare.

Oct 31 '13 16:10 rayfranco

So, still no luck getting a working configuration ? Seems the pull request has been reverted due to the bugs it introduced. On the other hand there are more than 1K views on the Stack Overflow question about that, and still no usable solution.

I haven't tried in a while, maybe newer version come with a better handling of the situation, but could anyone confirm ?

Nov 27 '13 11:11 p-j

Do you have a github repo with your configuration ? It will be easier to see what's happening.

Stéphane Bachelier, Tél. 06 42 24 48 09 B8A5 2007 0004 CDE4 5210 2317 B58A 335B B5A4 BFC2

2013/11/27 Jeremie Parker [email protected]

So, still no luck getting a working configuration ? Seems the pull request has been reverted due to the bugs it introduced. On the other hand there are more than 1K views on the Stack Overflow questionhttp://stackoverflow.com/questions/18964875/how-should-i-configure-grunt-usemin-to-work-with-relative-pathabout that, and still no usable solution.

I haven't tried in a while, maybe newer version come with a better handling of the situation, but could anyone confirm ?

— Reply to this email directly or view it on GitHubhttps://github.com/yeoman/grunt-usemin/issues/184#issuecomment-29377348 .

Nov 28 '13 07:11 stephanebachelier

Still seems to be an issue in 2.0.

Jan 06 '14 23:01 zanetaylor

Is this this being worked on or can someone point out where we would try to fix this issue ourselves and submit a pull request?

There are a few issues on Github and Stack overflow is full of posts with exactly the same problem making usemin effective only if you don't have subdirectories in your project or everything runs out of the root directory.

BTW, the stack overflow question has over 2400 views now.