Grunt e HTML5 Location: come aggiungere uno slash davanti al percorso dei bower components

Usando Grunt durante lo sviluppo di una web app scritta in AngularJS dove viene utilizzata la HTML5 location (per eliminare quel fastidioso # dalle varie route), potreste avere lo stesso problema che ho avuto io: la necessità di aggiungere uno slash davanti al percorso dei bower components.

Infatti se non viene aggiunto questo i bower components seguiranno il percorso relativo e nel caso di route del tipo /abc/def/ i bower components verranno caricati da /abc/bower_components e, ovviamente, non funzioneranno.

Risolviamo quindi il problema modificando la configurazione di Grunt (nel file Gruntfile.js), aggiungendo alla configurazione di wiredep il seguente json:

        fileTypes:{
          html: {
              replace: {
                  js: '',
                  css: ''
              }
          }
        }

La nostra configurazione di wiredep dovrebbe essere quindi simile a questa:

   wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//,
        fileTypes:{
          html: {
              replace: {
                  js: '',
                  css: ''
              }
          }
        }
      },
      test: {
        devDependencies: true,
        src: '<%= karma.unit.configFile %>',
        ignorePath:  /\.\.\//,
        fileTypes:{
          js: {
            block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
              detect: {
                js: /'(.*\.js)'/gi
              },
              replace: {
                js: '\'{{filePath}}\','
              }
            }
          }
      }
    }