grunt-inline
Brings externally referenced resources, such as js, css and images, into a single file.
For exmample:
is replaced with
JavaScript references are brought inline, and images in the html and css blocks are converted to base-64 data: urls.
By default, only urls marked with __inline
are converted, however this
behavior can be overrided via the tag:
option.
Getting Started
This plugin requires Grunt ~0.4.1
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 --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks;
The "grunt-inline" task
Overview
In your project's Gruntfile, add a section named inline
to the data object passed into grunt.initConfig()
.
grunt;
Options
dest
If dest is assigned, the the source file will be copied to the destination path. eg:
src/index.html
will be processed and then copied to dist/index.html
grunt;
cssmin
If cssmin is assigned true, .css
will be minified before inlined.
grunt;
__inline
)
tag (defaults to Only URLs that contain the value for tag
will be inlined.
Specify tag: ''
to include all urls.
grunt;
inlineTagAttributes
Ability to add attributes string to inline tag.
grunt;
uglify
If uglify is assigned true, .js
file will be minified before inlined.
grunt;
exts
Setting an exts array allows multiple file extensions to be processed as html.
grunt;
Usage Examples
config
grunt;
src/index.html
demo
after grunt inline
was run, it will be something like
demo
inline tag
Suppose there is an <inline>
tag in index.html
like bellow
<!-- inline tag -->
The content of test.html
is
I'm inline htmlhello world!
Then, after the inline
task is run, the original content in index.html
will be replaced with
I'm inline htmlhello world!
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
- 2019-12-20 v0.3.7 document optimized: markdown style problems of README
- 2015-01-09 v0.3.3 bug fix: when processing files of a folder and then copy the processed content to another destination, the original files are changed unexpectedly, as mentioned in this issue Support file globbing for input and output
- 2014-06-16 v0.3.1 bug fix: protocol-relative urls in css are messed up
- 2014-06-15 v0.3.1 bug fix: when options.tag is '', then all img tags, whose src attribute has already been inlined will be matched.
- 2014-05-19 v0.3.0 support for new options.exts
- 2014-05-19 v0.2.9 bug fix: options.tag is assigned '', bug image url in css are not converted to base64 formate
- 2014-03-06 v0.2.6 bug fix: script tags like were not inlined
- 2014-01-31 v0.2.3 radded tag option, encode url(..) images.
- 2013-10-31 v0.2.2 bug fix: img urls like 'background: url(http://www.example.com/img/bg.png)' will be transformed to 'background: url(url(http://www.example.com/img/bg.png))'
- 2013-10-30 v0.2.1 bug fix: when processing relative file path of img url in css stylesheet, forgot to transform "" to "/" for windows users
- 2013-10-30 v0.2.0 new feature: Support for minifing js、css when they ar inlined into html.
- 2013-08-30 v0.1.9 bug fix: stylesheets ended with ">" cannot be inlined
- 2013-09-02 v0.1.9 add feature: add options.dest to assign a destination path where the source file will be copied
- 2013-09-02 v0.1.8 add feature: support for
<inline>
tag