grunt-inline-web-components

Inline web components' template files into an HTML file

Getting Started

This plugin requires Grunt ~0.4.5

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, you may install this plugin with this command:

npm install grunt-inline-web-components --save-dev

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

grunt.loadNpmTasks('grunt-inline-web-components');

The "inline_web_components" task

Overview

In your project's Gruntfile, add a section named inline_web_components to the data object passed into grunt.initConfig().

grunt.initConfig({
	inline_web_components: {
		options: {
			components: {
				"info-window": "components/info-window.html",
				"my-component:first": "components/my-component.html",
				"flashy-button.critical": "components/flashy-button.html"
			}
		},
		dist: {
			files: [
				expand: true,
				cwd: "app",
				src: "{,*/}*.html",
				dest: "dist"
			]
		},
	},
});

Options

options.components

Type: Object

Each key is a jQuery style selector, its value is a path to a template file to inline into every node that matches the selector.

License

Copyright (c) 2014 Fredrik Ekelund Licensed under the MIT license.