Using gulp and bower for build automation and dependencies management for angularjs app part1

This post is going to be about how to use gulp and bower for dependencies management and automation. In my last post we setup the angularjs project with yeoman scaffolding and visual studio 2013  ; this is the continuation of the next part however this post can be used separately as well for gulp and bower:

gulpbower-logo

Gulp.js 

Gulp is a streaming build / task system ; it uses pips for streaming data that needs to be processed; like for instance minification of css and then publishing it to destination folder.

Bower

Bower is also a node module(plugin) that is used for managing dependencies for dev or production build , keeping them updated and reusing the packaging.

So lets work with examples and see what the hoopla is all about 🙂

Below are the highlighted files that are important to gulp and bower , we can manually build these files however yeoman takes care of most of them but we need to create gulpfile.js

imp

Inside of the gulpfile.js we will define gulp plugins that we will be using to create our build setup; these are all dependencies that can be downloaded through bower or npm.

We are going to download the above dependencies for which we will fire up the cmd prompt and use node npm to install them

npm install gulp bower gulp-util gulp-jshint gulp-usemin gulp-uglify gulp-minify-css express browser-sync

We will then create the gulpfile.js in our project folder using any notepad tool or visual studio and add the dependencies below:

var gulp = require('gulp');

var gutil = require('gulp-util');

var jshint = require('gulp-jshint');

var usemin = require('gulp-usemin');

var uglify = require('gulp-uglify');

var minifyCss = require('gulp-minify-css');

var express = require('express');

var browserSync = require('browser-sync');

I am going to talk more about the above plugins while I create the gulp tasks – but lets first talk about what the gulp task does; it basically used to define functionality that will be used in build automation for example in the below code we are using the gulp object that we created above to create task called ‘jshint’ and then we assign function to the task.

gulp.task('jshint', function () {
    gulp.src('public/js/**/*.js')
	.pipe(jshint())
	.pipe(jshint.reporter('default'));
});

In this function we use .src method to open any *.js file in the folder path:

'public/js/**/'

and pipe into the file stream,run the jshint() plugin to find any errors or syntax issues and also use the default reporter for jshint. Simply enough logic? I thought so..

The next task is going to be even more simpler we create a task(‘templates’) that will take our angularjs directives from source folder and pipe them to the website folder sub folder called templates:

gulp.task('templates', function () {
    gulp.src(['public/templates/**/*.html', '!public/templates/index.html'])
	.pipe(gulp.dest('website/templates/'));

});

We see two things that are different from above examples 1) ! the exclamation mark against folder path

'!public/templates/index.html'

This is used to tell gulp.src not to open the file stream for that specific path ( I don’t want the Index.html page to go inside the templates folder)

And then the second thing is the:

gulp.dest('website/templates/')

Gulp will take all the html files in the source folder minus Index.html and publish them to the templates sub folder folder inside the website folder

We are now going to introduce the default task that will take both the ‘jshint’ and ‘templates’ task as dependencies to run the build:

gulp.task('default',['jshint','templates'], function () { 
gulp.src('public/templates/index.html')
.pipe(usemin({
assetsDir: 'public/',
css: [minifyCss(), 'concat'],
js: [uglify(), 'concat']
}))
.pipe(gulp.dest('website'));
});

In the default task we have the usemin() method that is piping through the index.html to look for build pre processor tags between which we link our css stylesheets and javascripts files. And then we use the minifyCss() and uglify() js methods the result is then streamed to the website folder.

That concludes this part 1 of the post , in the next part 2 I will talk about starting the express server from gulpfile.js , using browsersync to reload browser when we make changes to our files and the watch function – also we will be talking about the bower package management!

Here is the link to the full gulpfile.js used for the tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *