Grunt-expand-in-place NPM

grunt-expand-in-place

This simple task expands an HTML comment block section into CSS and Javascript imports so something like this:

	<!-- expand_section ["assets/app/js/**/*.js"] -->
	<!-- /expand_section -->

Becomes:

	<!-- expand_section ["assets/app/js/**/*.js"] -->
	<script type="text/javascript" src="./assets/app/js/form/core/js1.js"></script>
	<script type="text/javascript" src="./assets/app/js/form/core/js2.js"></script>
	<script type="text/javascript" src="./assets/app/js/form/core/js3.js"></script>
	<script type="text/javascript" src="./assets/app/js/form/types/js4.js"></script>
	<!-- /expand_section -->

Please note that the task doesn't remove the comment section heading and that it modifies the target HTML file in place.

My motivation for this was that I usually work on my HTML files directly and not a "template" so I wanted a tool to handle importing JS and CSS into my development HTML file directly.

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-expand-in-place --save-dev

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

grunt.loadNpmTasks('grunt-expand-in-place');

The "expand-in-place" task

Overview

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

grunt.initConfig({
  'expand-in-place': {
    your_target: {
      target: ['path/to/my/files/**/*.html']
    }
  }
});

Options

options.target

Type: Array

An array that contains the glob patterns for the files to process

Usage Examples

Sample Options

In this example,

grunt.initConfig({
  'expand-in-place': {
    dev: {
      target: ['my/files/*.html']
    }
  }
});

HTML Code:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Simple title</title>
  <!-- expand_section ["assets/app/css/*.css", "assets/app/css/directory/*.css"] -->
	<!-- /expand_section -->
</head>
<body>
  <p>Some text</p>
	<!-- expand_section ["assets/app/tmpl/**/*.tmpl"] -->
	<!-- /expand_section -->

  <p>Some text</p>

	<!-- expand_section ["assets/app/js/**/*.js"] -->
	<!-- /expand_section -->
</body>
</html>

Contributing

We're going with airbnb's Style-guides.
Add unit tests for any new or changed functionality.
Lint and test your code using Grunt.

Release History

12/03/2016 0.1.0 Initial release 22/04/2016 0.2.0 Fixed engine version requirement and coding style

gruntplugin css js header

@infinitebrahmanuniverse/nolb-grunt-e @everything-registry/sub-chunk-1794

0.2.0

8 years ago

0.1.0

8 years ago