grunt wiredep - cómo controlar cómo wiredep genera una ruta de archivo de bower y cómo controlar qué archivos se agregan o eliminan

grunt-wiredep

Question

Mi aplicación tiene el siguiente directorio

app -> appName -> index.html (js, css)

y por alguna razón, esta carpeta envoltura appName está estropeando wiredire

{ dest: ''.tmp/concat/scripts/vendor.js'',
      src: 
       [ ''../bower_components/es5-shim/es5-shim.js'',
         ''../bower_components/angular/angular.js'',
         ''../bower_components/json3/lib/json3.js'',
         ''../bower_components/angular-resource/angular-resource.js'',
         ''../bower_components/angular-cookies/angular-cookies.js'',
         ''../bower_components/angular-sanitize/angular-sanitize.js'',
         ''../bower_components/angular-animate/angular-animate.js'',
         ''../bower_components/angular-touch/angular-touch.js'',
         ''../bower_components/angular-route/angular-route.js'' ] },

esto es lo que se habría producido si el directorio es el siguiente

aplicación -> index.html (js, css)

{ dest: ''.tmp/concat/scripts/vendor.js'',
      src: 
       [ ''bower_components/es5-shim/es5-shim.js'',
         ''bower_components/angular/angular.js'',
         ''bower_components/json3/lib/json3.js'',
         ''bower_components/angular-resource/angular-resource.js'',
         ''bower_components/angular-cookies/angular-cookies.js'',
         ''bower_components/angular-sanitize/angular-sanitize.js'',
         ''bower_components/angular-animate/angular-animate.js'',
         ''bower_components/angular-touch/angular-touch.js'',
         ''bower_components/angular-route/angular-route.js'' ] },

y wiredep cambia el contenido del script de index.html y ¿cómo puedo controlar ese flujo? a veces se está eliminando el saneamiento angular de su guión [src]

Answer 1

¿Has intentado agregar cwd al bloque de options ?

Ex:

  // Automatically inject Bower components into the app
    wiredep: {
      options: {
        cwd: ''app/appName''
      }
      ....
    }

Answer 2

Deberías usar la opción de reemplazo de wiredep:

wiredep(
    {
        fileTypes: {
            html: {
                replace: {
                    js: ''<script src="/app/appName/{{filePath}}"></script>''
                }
            }
        }
    })

Generará:

<script src="/app/appName/bower_components/angular/angular.js"></script>

Answer 3

Esta es mi configuración truculenta (el mismo principio se aplica a Grunt, solo hay que pasarle las mismas opciones).

gulp.task(''wiredep'' , function()
{
    return gulp.src(''./app/index.html'')
           .pipe(wiredep({
               ''ignorePath'': ''../''
           }))
          .pipe(gulp.dest(''./app''));
});

Puede consultar el código fuente de wiredep en lib / inject-dependencies.js (línea: 80 ~ 85)

map(function (filePath) {
    return $.path.join(
      $.path.relative($.path.dirname(file), $.path.dirname(filePath)),
      $.path.basename(filePath)
    ).replace(////g, ''/'').replace(ignorePath, '''');
  }).

Simplemente reemplaza la broca que suministras (o no si no le das una).

Espero que ayude.