Grunt wiredep not wiring some bower components

Question

I am using yeoman webapp generator to generate a template to kick start of my work. At this moment, my bower.json looks like this

  {
    "name": "sample-project",
    "private": true,
    "dependencies": {
      "bootstrap-sass": "~3.3.5",
      "modernizr": "~2.8.3",
      "fontawesome": "~4.3.0",
      "jquery.smooth-scroll": "~1.5.5",
      "animate.css": "~3.3.0",
      "jquery.appear": "*"
    },
    "overrides": {
      "bootstrap-sass": {
        "main": [
          "assets/stylesheets/_bootstrap.scss",
          "assets/fonts/bootstrap/*",
          "assets/javascripts/bootstrap.js"
        ]
      }
    },
    "devDependencies": {
      "chai": "~3.0.0",
      "mocha": "~2.2.5"
    }
  }

Now, in cmd prompt I type this while grunt watch is running

bower install bootstrap-datepicker -S

Then I found "bootstrap-datepicker": "~1.4.0" is inserted into the dependencies section, then

<script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

will be automatically wiredep into my index.html, it becomes this

  <!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->
     .
     .
     <script src="bower_components/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

Then I try to install another bower component to my webapp

bower install country-region-selector -S

The next thing happens is I found "country-region-selector": "~0.1.8" is under dependencies section of bower.json like bootstrap-datepicker, however the corresponding

<script src="bower_components/country-region-selector/dist/crs.min.js"></script>

doesn't get wiredep into my index.html.

So my question is why grunt wiredep doesn't work on some bower components? The same thing happens to form.validation Could anybody shed some light on this problem?

Answer 1

grunt-wiredep works in a very specific way. The dependencies should be listed in an array inside the main property in bower.josn like the example you mentioned from bootstrap.

The problem you are facing is probably those packages doesn't have a main property or it is using multiple files in a string not an array.

To fix that, you can always define an override for the packages main property likes the following ...

In your grunt file:

wiredep: {
    ...
    overrides: {
      'package-name': {
        'main': [
          'link-to-css-file.css',
          'link-to-js-file.js'
        ]
      },
    },
},