grunt-component-build

Build and watch Components. Supports file globs inside of the scripts to build a component using any number of files. This is so that you can use Component in place of Browserify or similar tools to build out CommonJS apps and still have access to the components.

You can specify scripts and styles within Grunt and these will override the component.json file. This means you don't need to list every file to build with Component. This shouldn't be used for building Components themselves, but for compiling applications in a way you normally would with Browserify but using Component instead so you have access to Components.

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-component-build --save-dev

then load the tasks in your Gruntfile with

grunt.loadNpmTasks('grunt-component-build');

The Basics

Add a component section to your Grunt file:

component_build: {
  app: {
    styles: false,
    scripts: true,
    verbose: true
  }
}

You can add as many sub-tasks to the component_build task and they will be compiled separately.

Extending Component with Plugins

Builder.js allows us to extending it so we can add support for other languages, like Coffeescript or Jade. You can do this easily in the configure option in your grunt file.

component_build: {
  app: {
    output: './dist/',
    styles: false,
    scripts: true,
    standalone: true,
    configure: function(builder) {
      builder.use(myPlugin);
    }
  }
}

These plugins are extremely simple. You can grab them from npm or write your own.
List of plugins

Built-in Plugins

There are two plugins built into this grunt task. They compile Coffeescript and plain HTML.

component_build: {
  app: {
    output: './dist/',
    styles: false,
    scripts: true,
    standalone: true,
    plugins: ['coffee', 'templates']
  }
}

These are located in the /plugins folder and function the same way as any other builder.js plugin. These are opt-in so you'll need to add the line to your config.

Templates

Templates will convert any html files you have added to the templates section of your component.json file so you can require them without needing to do anything.

var template = require('./template.html');

Coffeescript

This works the same way as the template plugin except that it uses the scripts section of the component.json file. It will automatically compile and files ending in .coffee and allow you to require them as if they were JS files.

var calendar = require('calendar');

You don't need to add the .js extension when requiring the coffee files. Each coffee file is converted on the fly and replaces the original in the built file.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Release History

0.2.8

• Add an option for verbose output (similar to component build -v)

0.2.7

• Rename task to component_build
• Add Travis

0.2.6

• Upgrade component-build to 0.8.1

0.2.5

• Updated support for component-builder 0.7.0
• Updated grunt task to use new Builder config name
• .conf changed to .config

0.2.4

• Upgraded component-build to 0.6.4

0.2.0beta

• Added support for grunt 0.4.0

0.1.4

• Added builder.js plugin support

0.1.0

• First release

License

Copyright (c) 2012 Anthony Short
Licensed under the MIT license.