27

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?

Robb Schiller
  • 1,119
  • 2
  • 9
  • 17
  • By "js components", do you mean CSS files that are for specific javascript libraries? – cimmanon Apr 16 '13 at 16:32
  • No, I mean js libraries that are installed via [bower](http://twitter.github.com/bower). – Robb Schiller Apr 16 '13 at 17:30
  • 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. – cimmanon Apr 16 '13 at 17:32
  • @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 Apr 16 '13 at 19:43

3 Answers3

14

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)

Sindre Sorhus
  • 62,754
  • 35
  • 155
  • 217
  • 6
    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! – Robb Schiller Apr 17 '13 at 16:02
13

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

lfender6445
  • 25,940
  • 9
  • 95
  • 82
0

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
Michael Vashchinsky
  • 1,969
  • 1
  • 16
  • 15