node package manager


Bower components builder for Grunt

Powered by You Build Status

Automatic concatenation of installed Bower components (JS and/or CSS) in the right order.


This plugin requires Grunt 0.4.

$ npm install grunt-bower-concat --save-dev


Add somewhere in your Gruntfile.js:


Inside your Gruntfile.js file add a section named bower_concat. See Parameters section below for details.



Type: String Default: grunt.util.linefeed

Concatenated files will be joined on this string. If you're post-processing concatenated JavaScript files with a minifier, you may need to use a semicolon ';\n' as the separator. Separator is only applied to concatenated JS files.

options: { separator : ';' }



Type: Object, required. Defines the filetypes to be concatenated into a destination file. Where the key is the file extension (without the dot) and the value is the destination file. E.g:

dest: {
    js: 'build/_bower.js',
    scss: 'build/_bower.scss,
    coffee: 'build/

Also this version still supports this field to be a String, but this is deprecated: (Deprecated) Type: String, defines into which file all .js files should be concatenated.

Name of JS file where result of concatenation will be saved.


Type: String|Array, optional.

List of components you want to exclude.

exclude: [


Type: String|Array, optional.

By default bower-concat will include all installed in project components. Using include option you can manually specify which components should be included.

include: [


Type: Object, optional.

Unfortunately not all Bower components list their dependencies. If components concatenate in the wrong order, use this option to manually specify dependencies for those components.

dependencies: {
  'underscore': 'jquery',
  'mygallery': ['jquery', 'fotorama']


Type: Object, optional.

Some Bower components don’t list their main files or (more likely) don’t have bower.json file at all. In this case bower-concat will try to guess main file but sometimes it can’t or choose wrong one. You could explicitly define main files for that components.

mainFiles: {
  'svg.js': 'dist/svg.js',
  'mygallery': ['src/base.js', 'src/gallery.js', 'src/style.css']


Type: Function, optional.

This function will be called for every Bower component and allows you to change main files chosen by bower-concat.

callback: function(mainFiles, component) {
  return, function(filepath) {
    // Use minified files if available 
    var min = filepath.replace(/\.js$/, '.min.js');
    return grunt.file.exists(min) ? min : filepath;


Type: Function, optional.

This function will be called for every Bower component and allows you to change the contents of every file.

process: function(src) {
    // wrap each library in a self executing function with "use strict" 
  return "\n" +
    ";(function( window, jQuery, angular, undefined ){ \n 'use strict';\n\n" +
    src +
    "\n\n}( window, jQuery, angular ));";


Type: Object, optional.

Bower specific options that will be passed in during the bower.commands calls.

bowerOptions: {
  relative: false


Type: Boolean, default: false.

Include devDependencies along with regular dependencies.

Config Example

bower_concat: {
  all: {
    dest: 'build/_bower.js',
    cssDest: 'build/_bower.css',
    exclude: [
    dependencies: {
      'underscore': 'jquery',
      'backbone': 'underscore',
      'jquery-mousewheel': 'jquery'
    bowerOptions: {
      relative: false


The changelog can be found on the Releases page.


The MIT License, see the included file.