Using gulp to install from multiple bower config files

If you're being a good human being and not committing your bower_components directories into your code repository you'll typically need to "restore" your bower packages by doing:

bower install

From the directory in which your bower.json configuration file is located.

"Fabrik Hosted" is the main web application from which Fabrik customer websites are served. The application contains multiple site themes, each with their own set of pages and assets like stylesheets and JavaScript files.

A few months ago we made the decision to start using bower to keep each theme completely isolated - we previously experimented with sharing dependencies between themes but it ended up being problematic.

Our file structure looks like this:

- fabrik.hosted
    - assets
        - bower_components
        - less
        - js        
        - bower.json
    - themes
        - Airdura
            - assets
                - bower_components
                - less
                - js
                - bower.json
            - views
            - airdura.themedef.json
        - Calico
            - assets
                - bower_components
                - less
                - js
                - bower.json
            - views
            - calico.themedef.json      

As you can see, we have multiple bower.json files. One for our top level application assets and then separate configurations for each theme.

Since I don't work on this application that often I usually find that I'm missing packages that other members of the team have added. Until now I've had to resort to manually running bower install for each theme.

Using Gulp to install bower packages

We're already using gulp for a number of other tasks (compiling less, JavaScript, minification, bundling etc.) so I figured why not use it to install bower packages.

Fortunately someone has already gone to the work of creating a gulp package for doing this, gulp-install. Just pass it the paths to your bower or npm configuration files and it will automatically install the necessary packages:

var install = require("gulp-install");

gulp.src(['./bower.json', './package.json'])
  .pipe(install());

Using this plugin I was able to set up two tasks, bower-clean (deletes all bower_components directories) and bower_install (installs all bower packages).

gulpFile.js

var gulp = require('gulp'),
  $ = require('gulp-load-plugins')({
    pattern: [
      'gulp-*',
      'gulp.*',
      'del'
    ]
  });

// Path settings for Gulp
var config = {
  bowerInstallPaths: [
    'assets/bower_components',
    'themes/**/assets/bower_components'
  ],
  bowerPaths: [
    'assets/bower.json',
    'themes/**/assets/bower.json'
  ]
};

// Gulp task to remove all bower_components directories
gulp.task('bower-clean', function (cb) {
  return $.del(config.bowerInstallPaths, cb);
});

// Gulp task to install bower packages
gulp.task('bower-install', function () {
  return gulp.src(config.bowerPaths)
    .pipe($.debug())
    .pipe($.install())
    .pipe($.notify({
      onLast: true,
      message: 'Hosted: Restored bower packages'
    }));
});

Ben Foster

About Me

I'm a software engineer and aspiring entrepreneur with 12+ years experience in the tech industry and have worked with startups and SMB’s in areas such as healthcare, recruitment and e-commerce (I even worked in enterprise, once). I founded my first startup Fabrik in 2011.

I'm available for consulting. Just drop me a message on Twitter.

Creative Commons Licence