grunt-inline-import
v0.1.0
Published
A Grunt plugin for inlining file imports.
Downloads
6
Maintainers
Readme
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.