- What is Bower:
- A package manager for a web (front-end) that manages all your application’s front-end dependencies.
- It is used to install the right versions of the packages which are needed and their dependencies.
- It keeps track of all the packages and making sure they are up to date.
- It can manage components which contains HTML, CSS, JavaScript, fonts or image files.
- Installing Bower:
- It is a command line utility and installed using npm. So Bower requires node, npm and git and command to install:
npm install -g bowernpm install -g bower
(-g is if you want to use it as a command line tool)
- It is a command line utility and installed using npm. So Bower requires node, npm and git and command to install:
- Finding Packages:
- bower search <query>
bower search <query>
Example:bower search jquerybower search jquery
Example:bower search modernizrbower search modernizr
- You can also find package using the online component directory at https://bower.io/search/
- Installing Packages:
- bower install <package>
bower install <package>
- Example: bower install jquery
bower install jquery
Example:bower install modernizrbower install modernizr
- Installed packages will be present in a bower_components directory. This is created in the folder which the bower program was executed. The package path can be changed using the configuration options in a .bowerrc file.
- Installing Packages Using a bower.json File:
- It would be tiresome to manage to install multiple libraries/packages in an application individually using above commands so bower.json file help to manage multiple packages using the single command.
- bower.json looks like below and it needs to present in the root folder where the application is present.
{"name": "app-name","version": "0.0.1","dependencies": {"sass-bootstrap": "~3.0.0","modernizr": "~2.6.2","jquery": "~1.10.2"},"private": true}{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true }
{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true }
- In above:
name: Name of your application/package.
version: Version number for your application/package.
dependencies: The packages that are required by your application. You should specify a version number for each of these packages as shown in the example above. Specifying latest will cause Bower to install the most recent release of a package.
private: Setting this property to true means that you want the package to remain private and do not wish to add it to the registry in the future. - Now, using below command will install all packages with a specific version or latest as defined in bower.json under ‘dependencies’ key value.
bower installbower install
- Listing Installed Packages:
- Updating Packages:
- bower update
bower update
(Update all packages with the specific version specified or to latest if the version is specified as latest in bower.json) - bower update <package>
bower update <package>
bower update jquerybower update jquery
(To update specific package)
- Uninstalling Packages:
- bower uninstall <package> <package> <package> ... <package>
bower uninstall <package> <package> <package> ... <package>
Example:bower uninstall jquery modernizrbower uninstall jquery modernizr
(It can uninstall multiple packages at once)
Reference:
https://bower.io/
http://blog.teamtreehouse.com/getting-started-bower
Great article Sandeep. Hope to see more such articles.
Thanks Satej. Its good that you liked it and learnt something cool from it. More will come soon
Cool