Bower is a package manager for the web.
Modern web development involves use of variety of technologies like CSS, Jquery, Angular, Backbone, Bootstrap, SASS, LESS, Jasmin, gulp and the list keeps increasing. Package manager will be helpful to simplify and updating all these dependencies.
A package manager will be able to perform below tasks
Searching all the library dependencies…
Downloading and unpacking the archives…
Copying files into the projects…
All of this is replaced with a few commands in the CLI using Package Manager – Bower.
How Bower Works ?
Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading and saving the packages one is looking for.
Bower keeps track of these packages in a manifest file called bower.json.
Setup Bower Package
You could share the bower components by initializing the bower project as your own package. Run the following and see what happens.
You will be prompted to provide details about this bower project.
Proceed with defaults.
Now you would see a single file called bower.json getting created.
You might notice bower.json file has captured all the 3 dependencies i.e., jquery, angular, and backbone added.
Try this out yourself by removing bower_components folder.
rm -rf bower_components bower install
You should see the bower_components back in your project directory, installing all the needed dependencies as per the bower.json file. This is the beauty of bower.
New Dependencies into bower.json
Let us say, you plan to add a new dependency to your project. What do you do?
Simply run bower install bootstrap and add appropriate version if needed.
Now, how do you get this new addition propagated to rest of your team?
For this, use an option –save during installation.
Now try adding bootstrap to your project myFirstTutorial.
bower install bootstrap --save
Refresh your bower.json file and see that bootstrap is getting added automatically.
You could go ahead and commit this json file to your version repository so that others can find it.
Find the path of your dependencies, using:
bower list -path.
These paths can be referred while writing a HTML or CSS page.
To refer angularjs in your HTML
<html> < script src="bower_components/angular/angular.js" /> <body></body> </html>
More on Dependency Versions
Let us understand the dependencies in bower.json file.
You would notice ~, ^, >= .
If you take any version, say, angular 1.5.59 , 1 is the major version, 5 is the minor version and 59 could be a bug fix.
^ in front of the version indicates, the major version should be 1 and minor version can be anything i.e, bower can bring any 1.x.x version as dependency
~ informs right most digit in the version can be anything. i.e., bower can bring any 1.5.x version as dependency
>= indicates bower can bring any version greater than or equal to angular 1.5.59 as dependency
Updating a package is bower is quite simple we just need to say “bower update” and this will discards old or outdated versions and update it to latest version with keeping in mind the restrictions on the versions to be fetched specified in the bower.json file will still be considered while performing the updates.
You could also choose to update a single dependency viz..,
bower update angular
Uninstalling a package is similar to installation. You could just run bower uninstall <package>.
Same as how installing multiple packages are possible, uninstall will also work the same way. Viz..,
bower uninstall angular backbone bootstrap.
Using Local Cache
Bower supports installing packages using local cache (without internet), if the package was installed earlier for other projects in the local.
bower cache list
– above command lists all the packages installed earlier and are cached
bower cache clean
– Flushes out the cache
Useful Bower Commands
Apart from whatever commands we have come across so far, there are few more useful commands are listed here.
bower help – Displays help information
bower info – Displays overall info of the package
bower login – Authenticates with GitHub and stores credentials
bower search – Finds all the specified packages
bower home – Opens a package homepage in the browser
bower link – Creates a global link which can be consumed in other packages for linking. This is useful during testing.