how to control how wiredep generates bower file path and how to control which files is added/removed

Question

my app has directory as follows

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

and for some reason, this appName wrapper folder is messing up 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' ] },

this is what would've been produced if directory is as follows

app -> 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' ] },

and wiredep does change the index.html's script content and how can I control that flow? sometimes its stripping out angular-sanitize from its script[src]

Answer 1

You Should use the replace option of wiredep:

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

Will generate:

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

Answer 2

This is my gulp setup (same principle apply to Grunt, just pass the same options to it).

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

You can look at the wiredep source code in the lib/inject-dependencies.js (line:80~85)

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

It just replace the bit you supply (or not if you don't give it one).

Hope that helps.

Answer 3

Have you tried adding cwd to the options block?

Ex:

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