Bower introduction

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.

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/

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.

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

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

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/

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>

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.

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.

Commands list
 cache
 help
 home
 info
 init
 install
 link
 list
 login
 lookup
 prune
 register
 search
 update
 uninstall
 unregister
 version

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);
});

.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"
]
}
}

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.

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/

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"
]
}

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/

Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi

Bower introduction

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Bower introduction (20)

More from Oleksii Prohonnyi (14)

Recently uploaded (20)

Bower introduction