Bower and Gulp: match made in heaven (also)

This is kind of a sequel post to "Bower and Grunt: match made in heaven". With Gulp things are even more awesomer!

If you’re unsure what’s Bower and how to use it, the first post explains all that.


You’ve got directory bower_components full of packages downloaded from NPM, and there’s a lot of fluff, tests and examples, those serve an important purpose to the development of the project, but has little value to the end user. Most of those files don’t belong to the end product and should not be included to the project repo. That’s what this post is all about, moving packages main files out or bower_components.

Gulp plugin to rescure

main-bower-files plugin does few things:

  1. Checks projects bower.json for dependencies.
  2. Then it finds those dependencies from bower_components/, and copies their sources.

That’s all it does, then it’s up to you to make a stream from that source and pipe it to wanted location.

Note worthy thing: The main file is defined in each project’s bower.json file.

Install via trusty NPM:

$ npm install --save-dev main-bower-files

Then define a task:

var gulp = require('gulp'),
    mainBowerFiles = require('main-bower-files');

gulp.task('bower', function() {
    // mainBowerFiles is used as a src for the task,
    // usually you pipe stuff through a task
    return gulp.src(mainBowerFiles())
        // Then pipe it to wanted directory, I use
        // dist/lib but it could be anything really

Now you’d install a package normally, and then run the bower task:

$ bower install --save some-package
$ gulp bower

Note: There are other plugins also.

What if no main file?

Then an override needs to be defined in bower.json. For instance, the echo.js doesn’t have a main file defined, but it sure has a main file. Make an override, here’s a sample bower.json:

  "name": "some-project",
  "devDependencies": {
    "normalize-scss": "~3.0.2"
  "dependencies": {
    "echojs": "~1.7.0"
  "overrides": {
    "echojs": {              // Dir in bower-components
      "main": "dist/echo.js" // The location of the main file

Automate it fully

You can watch the bower_components/ and run bower-main-files automatically when a change occurs. Here’s a sample task:

var gulp = require('gulp');

gulp.task('watch', function() {
    // All files in bower_components'bower_components/**', ['bower']);

Common pitfalls

If nothing happens or only some packages get copied, it might be that the packages were accidentally installed without the --save flag. Hence, are present in bower_components but not listed in the bower.json file. devDependencies are also not copied. Just reinstall the packages: $ npm install --save some-package.

Here’s an example bower.json

  "name": "some-project",
  // Not copied
  "devDependencies": {
    "scut": "~1.0.1",
    "normalize-scss": "~3.0.2"
  // Only deps are copied
  "dependencies": {
    "jquery": "~2.1.1",
    "zepto": "~1.1.6",
    "requirejs": "~2.1.16"


Gulp rules! Bower rules! Webdev is easy and fun!


  • nvm says:

    nice articles but your website is hard to read because of the colors..

Club-Mate, the beverage →