CODEWITHSUNDEEP
bowerbower-install
LuTz
LuTz

Reputation: 1523

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?

Upvotes: 1

Views: 2788

Answers (2)

jdstein1
jdstein1

Reputation: 117

I use wiredep with gulp.js or Grunt.js to include whatever dependencies my app needs:

It allows you to automatically insert any bower package your app needs to run. Add "wiredep" as a task to any of your gulp.js or Grunt.js build tasks.

Upvotes: 0

Jesper
Jesper

Reputation: 7615

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

Upvotes: 3

Related Questions