Install Bower components into two different directories?

javascript components sass organization bower

10,806

Solution 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)

Solution 2

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

10,806

Robb Schiller

Updated on December 01, 2020

Comments

Robb Schiller over 3 years
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?
- cimmanon about 11 years
  
  By "js components", do you mean CSS files that are for specific javascript libraries?
- Robb Schiller about 11 years
  
  No, I mean js libraries that are installed via bower.
- cimmanon about 11 years
  
  I don't see a problem here. If all of the Sass files are in one location and the generated CSS files are in another location, then it doesn't matter how you organize things.
- Robb Schiller about 11 years
  
  @cimmanon - I'm not currently aware of any way to install components to two different directories via bower. I agree, it doesn't seem like a problem to have vendors localized to the directory of their function, but the .bowerrc file doesn't have any spec that I know of to define install paths for different file types.
Robb Schiller about 11 years

Thanks Sindre, I didn't think it was possible or really made sense. It just feels better in my head when files are organized as such. Appreciate all your hard work on Bower, Grunt, etc man! Thanks for pushing the web forward!
James Wright over 9 years

This won't work as Bower will look for bower.json in your present working directory.