JavaScript Task Runners and Bower Components

Oct 5, 2015

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.

 

RECENT POSTS

The Agile Manifesto in Practice: Part 1

The Agile Manifesto in Practice: Part 1

  How Sourcetoad Values People Over Process The software development process can involve a lot of uncertainty for both development teams and clients alike, especially in the early phases of a project. How can the long-term vision of an application be balanced...

What to Consider When Building HIPAA-Compliant Software

What to Consider When Building HIPAA-Compliant Software

In 1999, the Department of Health and Human Services (HHS) passed the Health Insurance Portability and Accountability Act (HIPAA) as a measure to protect personal health information (PHI) and allow people control of their healthcare records. The HITECH Act was enacted...

The Evolution of Buy Now, Pay Later in eCommerce: Part 2

The Evolution of Buy Now, Pay Later in eCommerce: Part 2

In Part 1, we talked about the rapid growth of Buy Now, Pay Later (BNPL) and discussed its expansion across industries. In Part 2, we will consider how impending regulation may shake up the short-term lending space.   Impending Regulation of BNPL While consumers...