grunt-usemin and multiple path on index.html

Question

First of all, sorry for my english and sorry to be new with grunt.

Now, my question ;-)

I have 2 directories for my Javascript files (/components and /src/main/javascript) included on the index.html which is on /src/main/html. Imagine my gruntfile on the / directory.

I would like to find the simpliest way to have an only .js for all my javascript files on the /target/gui/javascript directory.

But before that, I'm ok to have one file by javascript sources directories. But, I have a problem when I do the following comment on the index.html.

<!-- build:js(components/angular) javascript/components.js -->
    <script src="../../../components/angular/angular.js"></script>
<!-- endbuild -->
<!-- build:js(src/main/javascript) javascript/app.js -->
    <script src="../javascript/app.js"></script>
    <script src="../javascript/lists/services/lists.js"></script>
    <script src="../javascript/lists/controllers/listsctrl.js"></script>
    <script src="../javascript/lists/controllers/listctrl.js"></script>
<!-- endbuild -->

My problem is that my components.js is empty. I can see a strange thing when I launch my grunt build :

    Found a block:
    <!-- build:js(components/angular) javascript/components.js -->
    <script src="../../../components/angular/angular.js"></script>
    <!-- endbuild -->
    Updating config with the following assets:
    - ../components/angular/angular.js

Updating with ../components/angular/angular.js ? Not components/angular/angular.js ? I don't understand. I did the same thing with my CSS files, and it does what I want :

    <!-- build:css(components/bootstrap/css) css/components.css -->
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap-responsive.css" type="text/css" />
    <!-- endbuild -->
    <!-- build:css(src/main/css) css/app.css -->
    <link rel="stylesheet" href="../css/shoppinglist.css" type="text/css" />
    <!-- endbuild -->

I can see

Found a block:
    <!-- build:css(components/bootstrap/css) css/components.css -->
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap-responsive.css" type="text/css" />
    <!-- endbuild -->
Updating config with the following assets:
    - components/bootstrap/css/bootstrap.css
    - components/bootstrap/css/bootstrap-responsive.css

So, for the CSS, grunt understand the path I want ?

What I have on my Gruntfile ?

    (...)
     dest: {
        buildRoot : 'target',
        guiRoot   : 'target/gui',
        html: {
           index:    'target/gui/index.html',
           partials: 'target/gui/partials'
        },
        res:        'target/gui/assets'
    },
    useminPrepare: {
      html: '<%= dest.html.index %>'
    },

    usemin: {
      html: ['<%= dest.html.index %>'],
      options: {
        dirs: ['<%= dest.guiRoot %>']
      }
    }
    (...)

I use grunt build with :

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-usemin');


    grunt.registerTask('build',   ['clean', 'copy:html', 'copy:res', 'copy:server', 'copy:heroku', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);

Someone can help me ?

Best regards,

Manu

Answer 1

Usemin's "alternate search path" is used as an origin directory to search for paths referenced in your index.html.

In your configuration, you'll have to cancel the three .. in your paths in order to find the component directory (located in the root dir).

This config will do the trick:

<!-- build:js(aFakeDir/anotherFakeDir/yetAnotherFakeDir) javascript/components.js -->
    <script src="../../../components/angular/angular.js"></script>
<!-- endbuild -->

Note that you don't have to specify real directory names.