Search code examples
bowerbower-install

Bower and folder structure


Let's say that I want to install jQuery UI. I do the command bower install jquery-ui and bower will download:

.
├── bower_components
│   ├── jquery
│   │   ├── dist
│   │   │   ├── jquery.js
│   │   │   └── jquery.min.js
│   │   └── src
│   └── jquery-ui
│       ├── themes
│       │   ├── smoothness
│       │   │   ├── jquery-ui.css
│       │   │   └── jquery-ui.min.css
│       │   └── [The rest of jQuery UI's themes]
│       ├── ui
│       │   ├── accordion.js
│       │   ├── autocomplete.js
│       │   └── ...
│       ├── jquery-ui.js
│       └── jquery-ui.min.js
└── index.html

after the download is finished to include the files in my index.html I'll have to write something like bower_components/jquery/dist/jquery.min.js, bower_components/jquery-ui/jquery-ui.min.js and for the css bower_components/jquery-ui/themes/smoo... etc.

I'm used to work with a much simpler folder structure, like this:

.
├── css
│   ├── main.css
│   └── slider.css
├── js
│   ├── jquery.min.js
│   └── jquery-ui.min.js
├── index.html
├── contact.html
└── pricing.html

I want to know if there's any way I can make bower automatically download the dist files to my css, js folders regardless of what I'm installing?


Solution

  • Bower is used for one thing - to grab the latest version of those components and make sure you get all the files you need.

    Bower does one job and is used as part of a "build pipeline". You're supposed to then use a second tool like Grunt or Gulp, or just a batch file/shell script with copy commands if you'd like, to copy only the files you need from bower_components into your desired folder structure. With Grunt and Gulp, this step can also include things like bundling or minification of scripts and stylesheets or even turning images into sprite sheets.

    That said, if you don't mind dumping all the files Bower will pull down from a certain component into your structure (probably leaving a lot of crap you don't want, considering the details in your question), you can use the .bowerrc file to change the output directory.

    (TL;DR: Bower is like IKEA, delivering parts in flatpack - you can't put the package in the living room and expect it to be a table already, but you can write something that knows what's in the package and assemble exactly what you want without having to go hunt for the individual parts manually. Or you can just unpack the package once and take what you want manually and never use Bower again - there's nothing wrong with that.)