grunt-inline-import

Grunt Inline Import

A Grunt plugin that inlines file imports.

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-inline-import --save-dev

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

grunt.loadNpmTasks("grunt-inline-import");

Usage

The inlining process is destructive. Affected files will be changed permanently. Create a backup first!
To inline your file imports, you need to specify the path to the JavaScript file that should be modified. Additionally, you need to define the extensions of the relevant import statements.

text.txt

hello world

index.js

import component from "module";
import text from "./text.txt";

Gruntfile.js

inlineImport: {
	options: {
		extensions: {
			".txt": "utf8"
		}
	},
	task: {
		src: "index.js"
	}
}

index.js (inlined)

import component from "module";
const text = "hello world";

Glob

You may use glob patterns to inline several files at once.

inlineImport: {
	options: {
		extensions: {
			".html": "utf8",
			".css": "utf8"
		}
	},
	task: {
		src: "src/**/tpl.js"
	}
}

Options

Check the options of the inline-import tool for details.

inlineImport: {
	options: {
		// Global options.
		extensions: {
			".html": "utf8",
			".png": "base64"
		},
		encoding: "utf8",
		useVar: true
	},
	task: {
		options: {
			// Local options.
			extensions: {
				".glsl": "utf8"
			}
		},
		src: "index.js"
	}
}

Creating a Backup

In order to create a backup of specific files, you'll need tools for copying and deleting files. The following example uses the basic grunt plugins grunt-contrib-copy and grunt-contrib-clean.

Gruntfile.js (copy setup)

copy: {
	backup: {
		expand: true,
		cwd: "src",
		src: "**/tpl.js",  // Copy all tpl files from src into a 
		dest: "backup",    // backup folder while maintaining directory structures.
		filter: "isFile"
	},
	restore: {
		expand: true,
		cwd: "backup",
		src: "**",         // Copy all backup files back into the 
		dest: "src",       // src folder, overwriting existing files.
		filter: "isFile"
	}
}

Gruntfile.js (clean setup)

clean: {
	backup: ["backup"]  // Remove the backup files.
}

Gruntfile.js (tasks)

grunt.registerTask("backup", ["restore", "copy:backup"]);
grunt.registerTask("restore", ["copy:restore", "clean:backup"]);
grunt.registerTask("prepublish", ["backup", "inlineImport"]);
grunt.registerTask("postpublish", ["restore"]);

Contributing

Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.