JavaScript Task Runners and Bower Components

For this article, I will assume you have, at least, some basic knowledge of what a Task Runner is and how to use them. There are a couple of different flavors out there, including Gulp and Grunt, but for this example, I will be employing Gulp to show you how I use it in my day-to-day tasks of UI design and rapid-prototyping. More importantly, I will show how I use Gulp in accompaniment with Bower to help manage project dependencies.

Gulp-bower in a nutshell

Gulp-bower is a Bower component dependency manager, which automatically downloads and installs your Bower dependencies, found in the project’s bower.json file, directly from the terminal via a Gulp task command.

Use Case

Here at Sourcetoad we often need to hand our work off to another person in the team to either bring it to the final stages or to simply have that team member apply their expertise where needed. For this to work smoothly we prefer our projects to be self-contained, small in file size and shared in a repository. Ideally, we would not want to include all of our Bower dependencies in the repository as it could become very heavy. To help keep file size low, I use the Gulp-bower plugin to make setting up the project and installing dependencies locally, less of a headache.

Let’s Get Started

We start by setting up our gulpFile.js, which begins with this very simple JavaScript snippet.

var gulp = require('gulp');

Next, we will want to add all of our required Gulp plugins, which, in this case we are only using one, the Gulp-bower plugin.

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

We then create our Gulp task, which will find our bower development dependencies found in bower.json, and install them into the default Bower components directory. In this case, the default directory found in ./.bowerrc or ./bower_components when no .bowerrc can be found.

gulp.task('bower', function() {

    return bower()

    .pipe(gulp.dest('lib/'))

});

Alternatively, we might want to install our dependencies into a custom directory, which, can be done by setting up the task like so:

gulp.task('bower', function() {  

    return bower('./my_bower_components')

    .pipe(gulp.dest('assets/'))

});

Notice how all we have to do is pass in our preferred directory to the default bower() function call.

return bower('./my_bower_components')

Finally, we create a custom run script called ‘setup’, which will run the default Bower install command and in turn download and install all of our Bower development dependencies.

gulp.task('setup', ['bower']);

In conclusion, to quickly have a project set up and running locally, all we are required to do is install Gulp and the Gulp dependencies included with the project, typically found in the repository readme file, and then run:

$ gulp setup;

So as you might begin to see, using Gulp with Bower components can make working on team projects quicker, faster, and easier to maintain. By managing development dependencies, such as Bower components, with a Task Runner like Gulp we can skip right to the fun part, and get to work.