grunt-script-link-tags

Auto-generate <script> and <link> tags for your HTML files.

Getting Started

This plugin requires Grunt ~0.4.0

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-script-link-tags --save-dev

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

grunt.loadNpmTasks('grunt-script-link-tags');

The "tags" task

Overview

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

grunt.initConfig({
	tags: {
	    build: {
	        options: {
		        scriptTemplate: '<script src="{{ path }}"></script>',
				linkTemplate: '<link href="{{ path }}"/>',
	            openTag: '<!-- start template tags -->',
	            closeTag: '<!-- end template tags -->'
	        },
	        src: [
	            'site/js/**/*.js',
	            '!site/js/vendor/**/*.js'
	        ],
	        dest: 'site/index.html'
	    }
	}
});

Options

options.scriptTemplate

Type: String

Default value: <script src="{{ path }}"></script>

If a matched file has a .js extension, it will compile the options.scriptTemplate template with the file path.

options.linkTemplate

Type: String

Default value: <link href="{{ path }}"/>

If a matched file has a .css extension, it will compile the options.linkTemplate template with the file path.

options.openTag

Type: String

Default value: <!-- start auto template tags -->

Specify where in the destination file to start adding script and link tags.

options.closeTag

Type: String

Default value: <!-- end auto template tags -->

Specify where in the destination file to stop adding script and link tags.

Usage Examples

Default Options

The following is the default configuration. tags will generate script and link tags for all matching src files and using the default scriptTemplate and linkTemplate defined above. it will then add these tags to site/index.html between the default openTag and closeTag.

grunt.initConfig({
	tags: {
	    build: {
	        src: [
	            'site/js/**/*.js',
	            '!site/js/vendor/**/*.js'
	        ],
	        dest: 'site/index.html'
	    }
	}
});

Custom Options

You can override all default options. In the following multi-task, we have two tasks, one for compiling scripts buildScripts, and another for compiling link tags, buildLinks.

buildScripts overrides scriptTemplate, letting your define you own template with extra attributes. It also override openTag and closeTag, specifying that they are for scripts.

buildLinks overrides linkTemplate to add a media attribute to it's link tags. Like buildScripts, it overrides openTag and closeTag to specify it's auto-generated css.

grunt.initConfig({
	tags: {
	    buildScripts: {
	        options: {
		        scriptTemplate: '<script type="text/javascript" src="{{ path }}"></script>',
	            openTag: '<!-- start script template tags -->',
	            closeTag: '<!-- end script template tags -->'
	        },
	        src: [
	            'site/js/**/*.js',
	            '!site/js/vendor/**/*.js'
	        ],
	        dest: 'site/index.html'
	    },
	    buildLinks: {
	        options: {
				linkTemplate: '<link rel="stylesheet" type="text/css" href="{{ path }}" media="screen"/>',
	            openTag: '<!-- start css template tags -->',
	            closeTag: '<!-- end css template tags -->'
	        },
	        src: [
	            'site/css/**/*.js'
	        ],
	        dest: 'site/index.html'
	    }
	}
});

Contributing

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

Author

Andrew Mead

https://www.github.com/andrewjmead

Release History

(Nothing yet)