Wrong path to bower components after using grunt-wiredep

Question

I'm trying to get Bower to work within my Drupal projects. In the root of my project I have a bower.json and .bowerrc file. Bower components are being installed in sites/all/themes/mytheme/libraries.

I've setup grunt-wiredep to automatically inject my bower components in my html.tpl.phpfile, like this:

wiredep: {
    task: {
        src: 'sites/all/themes/mytheme/templates/html.tpl.php'          
    }
}

When using grunt wiredep, the plugin injects the following path to my index.tpl.php file:

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

Where it should be this:

<script src="sites/all/themes/mytheme/libraries/jquery/dist/jquery.js"></script>

I've tried adding directory: 'sites/all/thems/mytheme'; to the wiredep task, but then I get the error that my dependencies are not installed.

Anyone can help me out?

Answer 1

It seems I got it working now. Here's what I did:

1) I ignored the first part of the path: ../

2) For html files, I replaced the references to the js and css dependencies. I added sites/all/themes/mytheme/ to the path.

Here is what my wiredep task now looks like:

wiredep: {
    task: {
        src: 'sites/all/themes/mytheme/templates/html.tpl.php',
        ignorePath: '../',
        fileTypes: {
            html: {
                replace: {
                    js: '<script src="sites/all/themes/mytheme/{{filePath}}"></script>',
                    css: '<link rel="stylesheet" href="sites/all/themes/mytheme/{{filePath}}"/>',
                }
            }
        }
    }
}