Wiredep won't insert bower CSS dependencies

Question

I'm trying to use wiredep to inject bower dependencies. I am confused a little about how it works, and why it is only working for my JS files.

gulp.task('wiredep', function(cb){
  gulp.src('./index.html')
    .pipe(wiredep())
    .pipe(gulp.dest('.'));
});

What does the final line gulp.dest('.') do? wouldn't the destination be my index.html file. Also, this task only seems to inject javascript files. I have in my bower.json dependencies for

"bootstrap": "~3.3.6",
"bourbon": "~4.2.6",
"jquery": "~2.1.4",
"neat": "~1.7.2"

Bootstrap, Bourbon, and neat, all have large amounts of CSS, yet the

<!-- bower:css -->
<!-- endbower -->

remain empty after running gulp wiredep. Why would this be?

bower.json deps look like this:

  "dependencies": {
    "angular": "~1.4.8",
    "bitters": "~1.1.0",
    "bourbon": "~4.2.6",
    "font-awesome": "fontawesome#~4.5.0",
    "jquery": "~2.1.4",
    "neat": "~1.7.2"
  }

Battleship

Answer 1

First of all add the official workaround from the bootstrap blog to your project's bower.json file:

"dependencies": {
...
},
"overrides": {
  "bootstrap": {
    "main": [
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.css",
      "less/bootstrap.less"
        ]
    }
}

For other packages the pattern would be the same but change the path.

Sporophyte

That update needs to be made in each individual package's bower_components file? Is there some way to make this process less manual? This seems pretty time-consuming and at-odds with the time-saving intent of this gulp task.. :/ – Battleship

No add it to your project's bower.json file. I will add it as an update to the answer. – Sporophyte

Right, i see i missed that the first time. But it does need to be done for ever bower dependency? – Battleship

Every bower component that wiredep does not add it by default. – Sporophyte

What would wiredep add by default? Also, can you show me what it would look like for just one of the other dependencies? Thanks so much for your help. – Battleship

in one of my projects, I wanted to use OnsenUI package and I used the following code snippet in bower.json file for wiredep to add the files correctly. "overrides": { "bootstrap": { "main": [ "dist/js/bootstrap.js", "dist/css/bootstrap.css", "less/bootstrap.less" ] }, "OnsenUI": { "main": [ "js/onsenui.js", "css/*.css" ] } } – Sporophyte