Absolute path using grunt-wiredep for Grunt + Bower

Moon picture Moon · Jun 8, 2014 · Viewed 7.2k times · Source

The grunt-wiedep task outputs relative paths for assets. I instead need absolute paths. So, I reconfigured the replace block as suggested here: https://github.com/stephenplusplus/grunt-wiredep/issues/46

But, after specifying the replace block as suggested, I get the following added as my script reference. As you can see, it is wrong.

<script src="/../../../public/vendors/jquery/dist/jquery.js"></script>
<script src="/../../../public/vendors/angular/angular.js"></script>
<script src="/../../../public/vendors/angular-resource/angular-resource.js"></script>
<script src="/../../../public/vendors/angular-route/angular-route.js"></script>

What I want is this instead:

<script src="/vendors/jquery/dist/jquery.js"></script>
<script src="/vendors/angular/angular.js"></script>
<script src="/vendors/angular-resource/angular-resource.js"></script>
<script src="/vendors/angular-route/angular-route.js"></script>

So, I tried this for my replace block. Notice the RegEx:

replace: {
    js: '<script src="/{{filePath}}"></script>'.replace(/\.\.\/public/gi, ''),
    css: '<link rel="stylesheet" href="/{{filePath}}" />'.replace(/\.\.\/public/gi, '')
}

But it appears that {{filePath}} is being replaced at a later time and hence the RegEx does not yield the expected results.

What would be an ideal way to handle such situation?

Answer

Robert Noack picture Robert Noack · Jul 3, 2014

In the gruntfile.js configuration for wiredep add the following: ignorePath: '/../../../public'

This will remove that part from the start of the path created by wiredep.

For example something like this, plus whatever adjustments for your config:

wiredep: {
    target: {
        src: [
            '/Views/**/*.html',
        ],          
        ignorePath: '/../../../public',
        dependencies: true,
        devDependencies: false, 
    }
},