grunt-bower-requirejs

by yeoman

[DEPRECATED] Grunt task - Automagically wire-up installed Bower components into your RequireJS confi...

200 Stars 24 Forks Last release: Not found 56 Commits 14 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

grunt-bower-requirejs Build Status

Automagically wire-up installed Bower components into your RequireJS config

Grunt wrapper for the bower-requirejs module.

Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:

npm install grunt-bower-requirejs --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-bower-requirejs');

Example usage

grunt.initConfig({
  bowerRequirejs: {
    target: {
      rjsConfig: 'app/config.js'
    }
  }
});

grunt.loadNpmTasks('grunt-bower-requirejs');

grunt.registerTask('default', ['bowerRequirejs']);

Documentation

When the

bowerRequirejs
task is run it merges the paths of installed Bower components into the
paths
property of your RequireJS config.

You trigger this task from another task in your Gruntfile or through the CLI:

grunt bowerRequirejs

rjsConfig

Required
Type:

String

Specify a relative path to your RequireJS config.

Make sure to specify the

baseUrl
property in your RequireJS config if you want to use relative paths.

Options

exclude

Default:

[]

Type:
Array

Specify components to be excluded from being added to the RequireJS config.

bowerRequirejs: {
  all: {
    rjsConfig: '/scripts/main.js',
    options: {
      exclude: ['modernizr', 'sass-bootstrap', 'qtip2']
    }
  }
}

baseUrl

Default:

null

Type:
String

Generate paths relative to a specific directory. This option is for anyone not using

data-main
who wishes to set their own base.
bowerRequirejs: {
  all: {
    rjsConfig: '/path/to/main.js',
    options: {
      baseUrl: './'
    }
  }
}

transitive

Default:

false

Type:
Boolean

If the transitive option is set to

true
, then transitive dependencies will be also added to the require config.

For example, say we explicitly have an entry in our bower config for module

myTotallyCoolModule
, which depends on
jQuery
and
underscore
. If the transitive option is set to
true
, there will be config entries for
myTotallyCoolModule
,
jQuery
, and
underscore
. Otherwise, if the transitive option is set to
false
, there will only be a config entry for
myTotallyCoolModule
.

Each transitive dependency is only included once, even if the dependency is used multiple times.

bowerRequirejs: {
  all: {
    rjsConfig: '/scripts/main.js',
    options: {
      transitive: true
    }
  }
}

excludeDev

Default:

false
Type:
Boolean

If the excludeDev option is set to

true
, then dev-pendencies won't be added to the require config.
bowerRequirejs: {
  all: {
    rjsConfig: '/scripts/main.js',
    options: {
      excludeDev: true
    }
  }
}

Using Bower Hooks

Bower >=v1.3.1 includes hooks for

preinstall
,
postinstall
and
preuninstall
actions. To run grunt-bower-requirejs after every bower install, add a
scripts
block to your
.bowerrc
.
{
  "scripts": {
    "postinstall": "grunt bowerRequirejs"
  }
}

Things to remember

Config file

If you do not already have a

config.js
file at the location specified by the
--config
option then one will be generated for you. A basic
config.js
file looks like this:
requirejs.config({
  shim: {},
  paths: {}
});

You still need to create a path for your js files. This tool will only create paths for third party libraries specified in

bower.json
.
requirejs.config({
  shim: {},
  paths: {
    myComponent: 'js/myComponent.js'  // make sure to add your components!
  }
});

The tool does not overwrite the config file, it just adds additional paths to it. So paths you add will be preserved. Keep in mind that if you change or remove one of your Bower dependencies after you've run the task, that path will still exist in the config file and you'll need to manually remove it.

RequireJS component

Although RequireJS does not provide a

bower.json
file, a path to
require.js
will still be created in your
rjsConfig
file. The path's name will be
requirejs
. If you are optimizing your scripts with
r.js
you can use this path to make sure RequireJS is included in your bundle.

Package Support

If a dependency's

moduleType
is set to
node
in
bower.json
it will be treated as a CommonJS Package.

The following

bower.json
file:
{
  "name": "node-module-type-stub",
  "version": "0.0.1",
  "moduleType": ["node"],
  "main": "myMain.js"
}

Will generate this entry in your

config.js
file:
require.config({
  shim: {},
  packages: [
    {
      name: 'node-module-type-stub',
      main: 'myMain.js',
      location: 'bower_components/node-module-type-stub'
    }
  ],
  paths: {}
});

Configuring location

By default, the task will set the package

location
to the root directory of the dependency. If the dependency includes a
location
property in its
bower.json
, then the location will be a combination of the root directory and the location dir.

For example, a bower.json like this:

{
  "name": "node-module-type-stub",
  "version": "0.0.1",
  "moduleType": ["node"],
  "main": "myMain.js",
  "location": "src"
}

Will generate this entry in your

config.js
file:
require.config({
  shim: {},
  packages: [
    {
      name: 'node-module-type-stub',
      main: 'myMain.js',
      location: 'bower_components/node-module-type-stub/src'
    }
  ],
  paths: {}
});

License

BSD license and copyright Google

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.