Grunt keeps removing my absolute paths

Question

I have references to some external JS files in my index.html like this:

<!-- build:js(app) /scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->

Every time I run grunt serve (generator-angular-fullstack), the initial slashes are removed ("/bower_components/..." → "bower_components/..."), which ruins my pages >1 steps down in the hierarchy.

Is there a quick fix?

Answer 1

From https://github.com/stephenplusplus/grunt-bower-install/issues/43#issuecomment-33799772:

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

You will likely have to un- and re-install grunt-bower-install to use this new type of configuration. You should also consider using <base href="/"> as well.

Answer 2

I am using the angular-generator with yo and this is what worked for me:

Gruntfile.js (line 160ish)

bowerInstall: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath: '<%= yeoman.app %>/',
    fileTypes: {
      html: {
        replace: {
          js: '<script src="/{{filePath}}"></script>',
          css: '<link rel="stylesheet" href="/{{filePath}}" />'
        }
      }
    }
  }
}

Answer 3

Not sure why my bower-install config looks different, but this is how I got it to work:

Original settings:

'bower-install': {
    app: {
        html: '<%= yeoman.app %>/views/index.html',
        ignorePath: '<%= yeoman.app %>/',
        replace: {
            js: '<script src="/{{filePath}}"></script>'
        }
    }
},

Change:

        ignorePath: '<%= yeoman.app %>',

(removing the ending slash)

Answer 4

I had the same problem. Turned out that I put the base tag below the stylesheet section. Once I placed it on top it worked like a charm:

  <base href="/"> <!- correct!! -->
  <!-- build:css(client) app/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
  <!-- endbower -->
  <base href="/"> <!- wrong!!! -->