Manage your project dependencies using Bower

Let’s continue our tour on Yeoman.

 

Bower is a tool to manage your js dependencies of your project. you can find out all the dependencies on the bower.json. The bower.json below is the one initialized in the AngularJS project.

{
  "name": "eureka",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.7",
    "json3": "~3.2.4",
    "jquery": "~1.9.1",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.7",
    "angular-cookies": "~1.0.7",
    "angular-sanitize": "~1.0.7",
    "jqueryjs": "~1.8.2"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.7",
    "angular-scenario": "~1.0.7"
  }
}

 

1. Search for the available js libraries. For example, jQuery Cycle Plugin

bower search jquery-cycle

bower-manage-dependencies-1
 

2. Install the plugin and save the config in the bower.json.

bower install jquery-cycle --save

bower-manage-dependencies-2
 

5. If you want to add the js lib as a devDependencies, use the following command instead.

bower install jquery-cycle --save-dev

 

5. Check your bower.json again.

{
  "name": "eureka",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.7",
    "json3": "~3.2.4",
    "jquery": "~1.9.1",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.7",
    "angular-cookies": "~1.0.7",
    "angular-sanitize": "~1.0.7",
    "jquery-cycle": "*"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.7",
    "angular-scenario": "~1.0.7"
  }
}

 

5. Include the jQuery Cycle Plugin in the .html by adding the following script tag.

<script src="bower_components/jquery-cycle/jquery.cycle.lite.js"></script>

 

Done =)

Advertisements

One thought on “Manage your project dependencies using Bower”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s