Bower is packager manager that allow you to manage the client packages of your application and it can be easily integrated with in a deploy workflow with a task runner like Gulp.
In this example, the sample application is an ASP.NET application with some NuGet packages installed and using Gulp to automate the deploy workflow.
With Bower you can manage packages like AngularJS, Boostrap, JQuery and so on; it’s a front-end package manager and it can be installed with npm (Node.js Package manager) :
npm install bower -g
In order to using Bower in an ASP.NET application, the first step is adding the bower.json file:
Bower install the packages in the path defined in the file .bowerrc and you can change it:
{
"directory": "bower_components"
}
Now you can using Bower to install the client packages which the application needs.
Once of the packages installed with NuGet on the existing application is AngularJS; it can be installed with Bower:
bower install angular –save
With the option –save, the bower.json file will be updated:
{
"name": "angular-signalr",
"private": true,
"main": [
""
],
"dependencies": {
"angular": "~1.5.5",
}
}
You can do the same operation for the other packages of the application; they will be installed in the bower_components path and new rows will be added in the bower.json file:
{
"name": "angular-signalr",
"private": true,
"main": [
""
],
"dependencies": {
"angular": "~1.5.5",
"angular-bootstrap": "angular-ui-bootstrap-bower#~1.3.2",
"angular-ui-router": "~0.2.18",
"AngularJS-Toaster": "aangular-toaster#~0.4.11",
"angular-loading-bar": "~0.9.0",
"angular-animate": "~1.5.5",
"angular-resource": "~1.5.5",
"bootstrap": "~3.3.6",
"jquery-ui": "~1.11.4",
"jquery": "~2.2.3",
"signalr": "~2.2.0",
"q": "1.0.1"
}
}
Now what we need to do is automate the workflow and inject these packages in the index page; you can do that with two Gulp plugins:
npm install –save-dev gulp-bower
npm install –save wiredep
You can find exhaustive documentation about these two plugins on the npm site.
The next step is adding the dependencies in the gulpfile.js of the application and creating the new task:
'use strict';
var gulp = require('gulp'),
bower = require('gulp-bower'),
wiredep = require('wiredep').stream
gulp.task('bower', function () {
return bower();
});
gulp.task('wiredep', ['bower'], function () {
var source = gulp.src('./' + config.indexDev);
return source.pipe(wiredep({}))
.pipe(gulp.dest('.'));
});
The main html file need to be changed, in order to make wiredep working:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Angular SignalR Application</title> <!-- build:css Content/lib.min.css --> <!-- bower:css --> <!-- endbower --> <!-- endbuild --> <!-- build:js Scripts/lib.min.js --> <!-- bower:js --> <!-- endbower --> <!-- endbuild --> </head> <body ng-app="angularSignalR"> </body> </html>
In the bower.json file you need also specify the main application modules:
{
"name": "angular-signalr",
"private": true,
"main": [
""
],
"dependencies": {
"angular": "~1.5.5",
"angular-bootstrap": "angular-ui-bootstrap-bower#~1.3.2",
"angular-ui-router": "~0.2.18",
"AngularJS-Toaster": "aangular-toaster#~0.4.11",
"angular-loading-bar": "~0.9.0",
"angular-animate": "~1.5.5",
"angular-resource": "~1.5.5",
"bootstrap": "~3.3.6",
"jquery-ui": "~1.11.4",
"jquery": "~2.2.3",
"signalr": "~2.2.0",
"q": "1.0.1"
},
"overrides": {
"angular": {
"main": [
"angular.js"
]
},
"angular-bootstrap": {
"main": [
"ui-bootstrap-csp.css",
"ui-bootstrap.js",
"ui-bootstrap-tpls.js"
]
},
"angular-ui-router": {
"main": [
"release/angular-ui-router.js"
]
},
"AngularJS-Toaster": {
"main": [
"toaster.css",
"toaster.js"
]
},
"angular-loading-bar": {
"main": [
"src/loading-bar.css",
"src/loading-bar.js"
]
},
"angular-animate": {
"main": [
"angular-animate.js"
]
},
"angular-resource": {
"main": [
"angular-resource.js"
]
},
"bootstrap": {
"main": [
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
},
"jquery": {
"main": [
"dist/jquery.js"
]
},
"jquery-ui": {
"main": [
"jquery-ui.js"
]
},
"q": {
"main": [
"q.js"
]
},
"signalr": {
"main": [
"jquery.signalR.js"
]
}
}
}
Now the configuration is completed and you can run the gulp tasks; once verified that the application works correctly, you can proceed with uninstalling the NuGet packages managed with bower; for example unistall AngularJS:
uninstall package AngularJS
You can find the project here.
Mirko Maggioni 
Leave a Reply