What is bower?

"Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you."
Bower is a front-end package manager built by Twitter

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows. Bower is optimized for the front-end. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum.

Bower is a node module, and can be installed with the following command:
npm install -g bower

Let try to get bootstrap for our web app. Let type.
bower install bootstrap

You will get latest version of boostrap and it dependencies as well such as jquery.
You can call for version of bootstrap from
bower install bootstrap#2.2

Those files will reside inside the '/bower_components' folder

You can used them

1 <link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css">
2 <script src="bower_components/jquery/dist/jquery.js"></script>
3 <script src="bower_components/jquery/dist/js/bootstrap.js"></script>

To updating all the packages
bower update

The --save flag will instruct bower to create (if it does not exist) a bower.json file and include the installed packages in it. This is an example of the generated bower.json file:

When any developer who has access to the repository runs bower install, it installs all the dependencies

bower install

bower install jquery#1 bootstrap --save

Build tools: Grunt

Grunt and Gulp are build tools, used to automate common and recurrent tasks, such as minifying scripts, optimizing images, minifying stylesheets, compiling less/sass/stylus. Bower plays well with Grunt/Gulp because of ready made plugins.

Grunt has a plugin called grunt-bower-concat which compiles all the main files for each bower component you have into a bower.js file. Which you can then use Grunt to minify (uglify), resulting in bower.min.js.

Grunt bower concat sample configuration:

1 bower_concat:{
2         all: {
3                 dest: "src/js/vendor/bower.js",
4                 destCss: “src/css/vendor/bower.css”
5         }
6 },

Finally think about 'package.json'

1 "scripts": {
2    "prestart": "npm install",
3     "postinstall": "bower update --unsafe-perm",
4     "start": "grunt"
5   }

'pre start' is the first command triggered when you run 'npm start'
'post install' is triggered by npm install. This will keep all our front-end packages up to date.
Finally 'start' runs grunt.