Bower in Practice: A Package Manager for Web Developers
• What is it – A package manager for the web. It is a tool that helps developers manage (download, update, etc) the packages (assets: JS libraries, CSS, etc) that developers use to implement their front-end development projects. More information about Bower can be found on their website at http://bower.io and on GitHub https://github.com/bower/bower
• The alternatives – Other package manager includes, npm (+ Browserify), spm (Static Package Manager), JamJS (JavaScript Package Manager), jspm.io, Component, etc..
• The benefits – Installing, updating and removing packages is dead simple. Dependency management. Discovery (Searching the Bower registry for a particular library & plugins associated with it).
• How to use it
▪ Installing it – Bower is a NodeJS module. Runs on Node.js and npm, so make sure you have Node installed. Then install Bower (its best to install it globally)
⁃ $ npm install -g bower
▪ Searching for packages – You can either search for packages through the web http://bower.io/search/ OR you can search from the command line:
⁃ $ bower search angularjs
▪ Getting detailed information about packages
⁃ $ bower info backbone
⁃ Listing installed packages and details… $ bower list
▪ Configuring your project – $ bower init … ===> bower.json file
⁃ Bower can be configured (customize the way Bower behaves) using JSON in a .bowerrc file which is a configuration file. Some of the configuration options include cwd, directory, registry, proxy and many more and can be found on http://bower.io/docs/config/
▪ Installing packages
⁃ $ bower install jquery
⁃ $ bower install jquery#1.10 ===> installs a specific version of the requested package
⁃ $ bower install jquery#1.10 — save ===> automatically updates your bower.json file for you
⁃ $ bower install <unregisteredPackageName> = <gitEndpoint>
⁃ Recommendations – 1) Specify and use fixed package version numbers. 2) Ensure everyone is using the same package version at all times.
▪ Updating installed packages – There are 2 ways
⁃ $ bower update jquery [—force]
⁃ Manually update your bower.json file with the version for the package you want, and then $ bower install
▪ Using the cache – For offline connectivity situations
⁃ bower cache list
⁃ bower cache clean
▪ Integration with build tools (Grunt): Grunt plugin: grunt-bower-task available at https://github.com/yatskevich/grunt-bower-task
⁃ Install packages from your grunt build script
⁃ Monitor changes to bower.json
⁃ Keep the development team in sync and up-to-date
⁃ Easy package updates: update your bower.json file, run grunt…automatically installs and updates the packages.
• Creating and maintaining your own package
▪ Some fundamentals – Bower is built on top of git. You can’t distribute your package through Bower without it being hosted at some git endpoint somewhere (GitHub, Bitbucket, self-hosted, etc). Package versions are really just git tags. New package version === tagged repository changeset.
▪ bower.json – Minimum requirements {“name”:”YourPackageName”,”version”:”0.0.1”} OR use bower init
▪ Package contents – Don’t include your entire repository in your package. Only include what consumers need to be able to use it. Use the ignore attribute to exclude what consumers don’t need.
▪ Registering your package – Remember to tag your repository and push those tags to your repo name (git push origin master —tags)
⁃ bower register YourPackageName git://github.com/YourGitHubUserName/YourPackageName.git
▪ Updating and maintenance
1) Make and save the changes to your package/code
2) Update version number in your bower.json file
3) Commit changes to your repo
4) Tag repo with the new version number
5) Push your changes to your repo name (don’t forget to use — tags switch when you push!)
6) Verify with bower info <package>
▪ Helpful tools
⁃ GitHub Releases
⁃ Grunt task: grunt-bump