Maintaining JS Libs – Changing bower path

If you are web developer it becomes hard to manage all js libraries if you aren’t using any package manager.
Few folks created bower to make the job easier. (As far as functionality is concerned, it works same as npm, if you have used.)

Steps for installations are just for linux guys – windows people – DIY.

First you need to install npm `sudo apt-get install npm`
You can install it by `sudo npm install -g bower`

Once you have installed bower, You can install a web package, just by executing following command in the directory of project –

`bower install jquery`

You can even use your own git repository as source or any other url

`bower install https://github.com/jquery/jquery.git#2.0.3`

Above command will install jquery for your project.

Once you have installed it successfully things will be kept in
`bower_components/jquery`
you can refer it by
`bower_components/jquery/dist/jquery.js`. Simple. That’t it ?

No.

if you are like me – possessive about your directory structure – You want everything inside something like `assets/lib/jquery/dist/jquery.js`, or simply want it inside `assets/lib` directory instead of too many file/directory in root.

You can create a file in root of project `.bowerrc`, put following content inside the file
`{
“directory” : “assets/lib”
}
`

Since filename begins with `.` it will be hidden in file browsers, clean.

Again – do you find these long assets path annoying ? – `Grunt` to rescue – check http://bower.io/docs/tools/#grunt

1 comment

    • Risabh Kumar on March 4, 2016 at 7:08 am
    • Reply

    Worry not Windows people.. another windows user to the rescue 🙂
    To install Bower on your system, first install nodejs from “http://nodejs.org/” and then open CMD or Git Bash and type “npm install -g bower” to see the magic.
    The rest remains the same 🙂
    Hope it helps.

Leave a Reply

Your email address will not be published.