Introduction to Bower(front-end package manager)
If you are creating a website you might be needing different framework to perform specific task for e.g. Bootstrap to make your site responsive, jQuery to make your site interactive & so on.
To manage all this stuff you can use bower. Bower let you download this frameworks, update this frameworks without going to the particular sites of the framework.
Bower is built by Twitter.
Bower is a node module & to install bower you need to have npm & node.
I have created a video on the same follow the link below to watch
Bower Tutorial for Beginners
To install bower run this command in your terminal
npm install -g bower
This will install bower globally on you system & you can use bower commands anywhere in your system.
How to install packages using bower
Installing packages with bower is super simple. Run this command everytime you want to install new package.
bower install package-name
Suppose I want to install bootstrap in my project. I have to just run this command
bower install bootstrap
& Bower will do all the hard work for me. Isn’t it cool :)
Not only that you can also install specific version using this command
bower install bootstrap#4.0
Create bower.json file
Before doing anything I will suggest creating bower json file which will keep track of dependencies you install.
To create bower.json file run this command
You can answer whatever it is asking or simply press enter.
Now if you go to your project directory you will see a bower.json file.
Whenever you are installing some dependencies you can use this command
bower install bootstrap --save
If you use — save bower will keep track of dependencies.
If you want to update all our packages it’s very easy just run this command
How to uninstall dependencies?
Run this command
bower uninstall bootstrap --save
If you working in a team you don’t have to give complete component folder generated by bower just provide bower.json file & tell your colleague to run bower install. It will automatically install all the dependencies listed in bower json file.
If you want to know more you can run this command
If you want to see the list of dependencies you have installed use this command
To know the path that you have to give in your script or link tag use this command
bower list --path
Note : You need to include bower_components folder generated by bower in to .gitignore(When you generate bower json it will ask to include bower_components into .gitignore simply say yes). This will tell git to ignore bower_component files. Other devlopers only need bower json file. They just have to run bower install to install all dependencies into their system.