3. Bower vs NPM
NPM and Bower are both dependency management tools. But the
main difference between both is NPM is used for installing Node.js
modules but Bower.js is used for managing front end components
like HTML,CSS,JS etc.
Bower, unlike NPM, can have multiple files (e.g. .js, .css, .html,
.png, .ttf) which are considered the main file(s). Bower semantically
considers these main files, when packaged together, a component.
5. Install Bower
Bower is a command line utility. Install it with npm.
$ npm install -g bower
Bower requires node, npm and git.
Latest release: v1.7.6
See more: http://bower.io/
7. Configuration
Packages are defined by a manifest file bower.json. This is similar
to Node’s package.json or Ruby’s Gemfile.
Interactively create a bower.json with bower init:
$ bower init
Detailed specification of bower.json file can be found in bower/spec
repository.
8. Dependencies maintenance
Bower installs packages to bower_components/ by default.
$ bower install <package>
Using bower install <package> --save will add <package> to your
project’s bower.json dependencies array.
$ bower install <package> --save
Similarly, using bower install <package> --save-dev will add
<package> to your project’s bower.json devDependencies array.
$ bower install <package> --save-dev
9. Dependencies maintenance
A package can be a GitHub shorthand, a Git endpoint, a URL, and
more.
$ bower install
$ bower install jquery
$ bower install desandro/masonry
$ bower install
git://github.com/user/package.git
$ bower install http://example.com/script.js
10. Search packages
If you want to check that the asset you want is a Bower package
you can do a search:
$ bower search <package-name>
Search bower packages using web interface: http://bower.io/search/
11. Use packages
It is recommended to use Bower together with Grunt, RequireJS,
Yeoman, and lots of other tools or build own workflow with the API.
It is also possible to use the installed packages directly, like this:
<script src=“
bower_components/jquery/dist/jquery.min.js
"></script>
12. Register packages
Registering your package allows others to install it with a short
name, like bower install <my-package-name>.
$ bower register <my-package-name> <git-endpoint>
Now anyone can run bower install <my-package-name>, and get
your library installed. The Bower registry does not have
authentication or user management at this point in time. It’s on a
first come, first served basis.
13. Unregister packages
You can unregister packages with bower unregister.
You first need to authenticate with GitHub with bower login to
confirm you are a contributor to the package repo.
bower login
? Username:
? Password:
bower unregister <package>
You’ll likely want to bower cache clean after your change.
15. Commands list
cache
help
home
info
init
install
link
list
login
lookup
prune
register
search
update
uninstall
unregister
version
16. Programmatic API
Bower provides a powerful, programmatic API. All commands can
be accessed through the bower.commands object.
var bower = require('bower');
bower.commands
.install(['jquery'], { save: true }, { /*
custom config */ })
.on('end', function (installed) {
console.log(installed);
});
18. .bowerrc file
Bower can be configured using JSON in a .bowerrc file. For example:
{
"directory": "app/components/",
"analytics": false,
"timeout": 120000,
"registry": {
"search": [
"http://localhost:8000",
"https://bower.herokuapp.com"
]
}
}
19. More options
Full .bowerrc file specification could be found:
http://bower.io/docs/config/#bowerrc-specification
One can use environment variables in .bowerrc, using the following
syntax ${ENV_VAR}.
"storage": {"packages":“/path/to/${USER}/packages"}
Bower provides 3 separate hooks that can be used to trigger other
automated tools during Bower usage: preinstall, postinstall,
preuninstall.
21. Resolvers
For example, resolvers can be used for:
Handling Mercurial or Bazaar repositories
Speeding up checkouts of services like GitLab or Bitbucket
Allowing to use packages from npm or component.io
Proxying downloads through 3rd party service like Artifactory
Implementing custom private registry (hosted on GitHub?)
Adding authentication support for private GitHub Enterprise
instances
See more: http://bower.io/docs/pluggable-resolvers/
22. Resolvers usage
Pluggable Resolver is just an npm package that you install as
devDependency in the package.json of your repository, or install
globally with npm install -g.
{
"resolvers": [
"bitbucket-resolver",
"github-enterprise-resolver"
]
}
23. Tools
Bower is used together with other tools to integrate with all sorts of
setups and workflows.
Grunt
Gulp
Rails & Ruby
Java
Apps & IDEs
Others
See more: http://bower.io/docs/tools/