Absolute path

[tobiasoberrauch]

Hi,

I'm using your extension in combination with expressjs. I didn't found a solution / parameter to get an absolute path:

<script src="/bower_components/modernizr/modernizr.js"></script>

instead of

<script src="bower_components/modernizr/modernizr.js"></script>

Cheers Tobias

[gearsdigital]

As 'bower-install' is based on wiredep you could override the fileType template. Note the / before /{{filePath}}

    'bower-install': {
            myTask: {
                fileTypes: {
                    html: {
                        block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
                        detect: {
                            js: /<script.*src=['"](.+)['"]>/gi,
                            css: /<link.*href=['"](.+)['"]/gi
                        },
                        replace: {
                            js: '<script src="/{{filePath}}"></script>',
                            css: '<link rel="stylesheet" href="/{{filePath}}" />'
                        }
                    }
                }
            }
        }

[stephenplusplus]

Thanks for answering Steffan! It's actually even easier-- you can simply adjust the relevant part of that config you want to override, such as:

'bower-install': {
  myTask: {
    fileTypes: {
      html: {
        replace: {
          js: '<script src="/{{filePath}}"></script>'
        }
      }
    }
  }
}

And not that wiredep shouldn't be able to handle your request, but have you also considered setting a <base href="/">?

[tobiasoberrauch]

Thanks a lot Steffan and Stephen. Great support :+1:

[silvenon]

Great solution, but unfortunately fails to detect other libraries (e.g. Modernizr) included in the same way.

[stephenplusplus]

Can you open a new issue on wiredep including your HTML file before and after running grunt bower-install?

[silvenon]

I'd love to, but for some reason I can't get this replacement config to work. It did work on my last project...

But setting <base href="/"> seems like an awesome idea, I completely forgot that existed.

[lancedikson]

What if I have this structure:

- bower.json
- Gruntfile.js
- app
-- views
--- assets
---- head.php

- public
-- bc  //aka bower_components
--- ...  // packages

I have the same config:

    wiredep: {
          app: {
            src: ['app/views/assets/*.php'],
            fileTypes: {
                php: {
                    block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
                    detect: {
                        js: /<script.*src=['"](.+)['"]>/gi,
                        css: /<link.*href=['"](.+)['"]/gi
                    },
                    replace: {
                        js: '<script src="/{{filePath}}"></script>',
                        css: '<link rel="stylesheet" href="/{{filePath}}" />'
                    }
                }
            }
          }
        }

And after running grunt wiredep I get block with relative path:

<!-- bower:js -->
<script src="/../../../public/bc/modernizr/modernizr.js"></script>
<script src="/../../../public/bc/jquery/dist/jquery.js"></script>
<script src="/../../../public/bc/fastclick/lib/fastclick.js"></script>
<script src="/../../../public/bc/jquery.cookie/jquery.cookie.js"></script>
<script src="/../../../public/bc/jquery-placeholder/jquery.placeholder.js"></script>
<script src="/../../../public/bc/foundation/js/foundation.js"></script>
<!-- endbower -->

What I should to do for absolute path to components like /bc/modernizr/modernizr.js?

[stephenplusplus]

You should be able to take out your fileTypes object, and instead use: ignorePath: '../../../public'

[lancedikson]

@stephenplusplus ok, thanks

[tonyanhq]

it works. thanks a lot:)

[brunowego]

Works nice! :+1:

    // Automatically inject Bower components into the HTML file
    wiredep: {
      app: {
        ignorePath: /^\/|(\.\.\/){1,2}/,
        src: ['<%= config.app %>/layouts/master.jade'],
        exclude: ['bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js'],
        fileTypes: {
          jade: {
            block: /(([ \t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
            detect: {
              js: /script\(.*src=['"]([^'"]+)/gi,
              css: /link\(.*href=['"]([^'"]+)/gi
            },
            replace: {
              js: 'script(src=\'/{{filePath}}\')',
              css: 'link(rel=\'stylesheet\', href=\'/{{filePath}}\')'
            }
          },
        }
      },
      sass: {
        src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }
    },

I using jade here.

[dustintheweb]

Another way:

ignorePath: new RegExp('.+?(?=/b)|.+?(?=../b)')

in app, ignore everything before /b in dist, ignore everything before ../b

As a general opinion, this part of the setup should be much simpler for users to understand.

[logusgraphics]

@dustintheweb is the cleanest solution and it works like a charm. Thank you @dustintheweb

[codedcontainer]

@stephenplusplus What this 'bower-install'? When I try to add this code I get an error.

[codedcontainer]

@brunowego My console tells me that bower.app.src does not exsist When I remove this It keeps telling me it trys to verify a property wiredep.fileTypes.src exsists in config...Error.

[codedcontainer]

Make sure that you add your filetypes inside of the target property or this won't work.

[insidewhy]

Beware using <base> if you are using SVG filters, all of your url links get messed up badly and if you need to use such a link from a css file when using base you may as well forget about it.