Bower
A package manager for the web

What is Bower

> Manage Dependencies on the client

> Can manage HTML, CSS, JavaScript, fonts and image files

> Dependencies are saved into a bower.json file

> Offer flat dependency graph, loading dependencies just once

Getting Started

> Requires node, npm and git

Install Bower

> Install Packages via Bower ( in bower_components/ folder)

> Save Packages

Create bower.json file*

Save new dependencies

$ npm install -g bower

$ bower install <package>

$ bower init

bower install PACKAGE --save

$ bower install qwest
bower qwest#*               not-cached https://github.com/pyrsmk/qwest.git#*
bower qwest#*                  resolve https://github.com/pyrsmk/qwest.git#*
bower qwest#*                 checkout 4.4.4
bower qwest#*                 resolved https://github.com/pyrsmk/qwest.git#4.4.4
bower qwest#^4.4.4             install qwest#4.4.4

qwest#4.4.4 bower_components\qwest

<script src="/bower_components/qwest/src/qwest.js"></script>

<script src="/static/js/qwest.min.js"></script>

From

To

Using Bower

npm install --save-dev grunt-wiredep

Using Grunt Wiredup

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-wiredep');
    grunt.initConfig({
        wiredep: {
            app: {
                src: 'index.html'
            }
        }
    });
};

Grunt file config

Install Packages

<!-- bower:js -->
<!-- endbower -->

index.html

$ bower install qwest

<!-- bower:js -->
<script src="bower_components/qwest/qwest.min.js"></script>
<!-- endbower -->

$ grunt wiredep