Install Bower components into two different direct

Question

When using CSS and JS components, is it possible, or even, does it make sense to install them to different directories?

.
|-- app
    |-- scripts
        |-- components           # js components go here
            |-- backbone-amd
            |-- etc
    |-- styles
        |-- modules
        |-- partials
        |-- components           # sass components go here
            |-- normalize.scss
            |-- etc

What's the most efficient way to structure a project organized as such? Is there a good Grunt task to accomplish the goal of integrating bower installed sass components for a development environment?

Answer 1

Bower needs to keep track of every component you install. That would be very hard if they were split up in multiple locations. For Sass development, just put the components folder in the Sass search path.

---

There are grunt tasks that can assist you in splitting it up if you insist on doing that:

(though not recommended)

• grunt-bower-task
• grunt-bower-organiser
• grunt-bower

Answer 2

Maybe You can have .bowerrc files in different directories, where you can config "directory" key to point to bower components directory.

But you will need to cd to correct directory before bower install whatever:

app/
  scripts/
    .bowerrc
  styles/
    .bowerrc
tests/
  .bowerrc

Answer 3

There is a node package called bower-installer that provides a single command for managing alternate install paths.

run npm install -g bower-installer

Set up your bower.json

{
  "name" : "test",
  "version": "0.1",
  "dependencies" : {
    "jquery-ui" : "latest"
  },
  "install" : {
    "path" : {
      "css": "src/css",
      "js": "src/js"
    },
    "sources" : {
      "jquery-ui" : [
        "components/jquery-ui/ui/jquery-ui.custom.js",
        "components/jquery-ui/themes/start/jquery-ui.css"
      ]
    }
  }
}

Then run bower-installer command.

This will install components/jquery-ui/themes/start/jquery-ui.css to ./src/css, etc