grunt-bower-task produces flat folder, but css assumes glyphicons in ../fonts

[zgardner]

The main config in bower.json lists the following:

"./dist/js/bootstrap.js", 
"./dist/css/bootstrap.css", 
"./dist/fonts/glyphicons-halflings-regular.eot",
"./dist/fonts/glyphicons-halflings-regular.svg",
"./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff"

When using grunt bower:install, it flattens out the folders, and copies those files to ./lib/bootstrap
This is a problem because bootstrap.css assumes the glyphicons files are in ../fonts:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

If I change main to the following:

"main": [
    "./dist"
],

It produces what I think is the correct structure:

./lib/bootstrap/js/bootstrap.js
./lib/bootstrap/css/bootstrap.css
./lib/bootstrap/fonts/glyphicons-halflings-regular.eot
...

[cvrebert]

But the Glyphicons are in ../fonts/ relative to bootstrap.css:

~ $ bower install twbs/bootstrap#3.1.1
<successfully installs>
~ $ cd bower_components/bootstrap/dist/css/
~/bower_components/bootstrap/dist/css/ $ grep halflings bootstrap.css
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
~/bower_components/bootstrap/dist/css/ $ file '../fonts/glyphicons-halflings-regular.ttf'
../fonts/glyphicons-halflings-regular.ttf: TrueType font data

I'm clearly not understanding what the problem is.

[zgardner]

When you use grunt-bower-task to install bootstrap, it flattens out the js, css, and fonts because bootstrap's main in bower.json is incorrect.
To see this issue, clone this repo: https://github.com/zgardner/bootstrapissue12805
Then run npm install; grunt bower-install;
You'll see that it creates:

dist/lib/bootstrap/bootstrap.js
dist/lib/bootstrap/bootstrap.min.js
dist/lib/bootstrap/bootstrap.css
dist/lib/bootstrap/glyphicons-halflings-regular.woff
...

When you define files in bower.json's main, it flattens them out into the target folder.
When you define folders in bower.json's main, it pulls in the folder.
Thus, when I go into bower_components/bootstrap/.bower.json and change it to:

"main": [
    "./dist/"
]

It produces a folder structure that will correctly resolve ../fonts/:

dist/lib/bootstrap/js/bootstrap.js
dist/lib/bootstrap/js/bootstrap.min.js
dist/lib/bootstrap/css/bootstrap.css
dist/lib/bootstrap/fonts/glyphicons-halflings-regular.woff
...

I believe this is an issue with Bootstrap because it's main in bower.json is the root cause.
According to the spec, it produces an incorrect folder structure.

[cvrebert]

My reading of the bower.json spec is that main should only contain filename(s), not directories. See also #11296. But I will seek clarification from the Bower folks to be completely certain.

[cvrebert]

@zgardner I still don't entirely get what you're doing. You're using layout: 'byType', but you're trying to achieve a layout: 'byComponent'–ish directory structure. Seems like you should just use byComponent in the first place then.

[zgardner]

I just tried byComponent, and it still produces the same directory structure for Bootstrap.

I noticed that some projects like Underscore and requirejs-tpl produce a directory structure if I include them in the bower dependencies. They don't have a main though.

[cvrebert]

I propose you use exportsOverride then.
Anyway, your problem seems to be with grunt-bower-task's directory structure fiddling, not Bower or Bootstrap itself (although grunt-bower-task is hindered by the lack of info that Bower exposes/allows, but again that's a shortcoming of Bower, which Bootstrap can't do much about).

[cvrebert]

Per bower/spec#19 , main cannot contain directories.

Closing this since it's a grunt-bower-task issue.

[zgardner]

FYI, I got this to work in grunt-bower-task by changing my layout to byComponent and using the following in my bower.json:

"exportsOverride": {
    "bootstrap": {
        "js": "dist/js/*.js",
        "css": "dist/css/*.css",
        "fonts": "dist/fonts/*.*"
    }
}

[markwainwright]

Here's my slightly simpler fix for this: (in bower.json)

"exportsOverride": {
  "bootstrap": {
    "/": "dist"
  }
}

It installs only the contents of the dist/ folder - which includes the CSS, JS and fonts in the expected folder structure.