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'
    }));
});