Brings externally referenced resources, such as js, css and images, into a single file.
For exmample:
<link href="https://github.com/chyingp/grunt-inline/blob/master/css/style.css?__inline=true" rel="stylesheet" />
is replaced with
<style>
/* contents of css/style.css */
</style>
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.
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('grunt-inline');
In your project's Gruntfile, add a section named inline
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
inline: {
dist: {
src: 'src/index.html',
dest: 'dist/index.html'
}
}
});
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.initConfig({
inline: {
dist: {
src: 'src/index.html',
dest: 'dist/index.html'
}
}
});
If cssmin is assigned true, .css
will be minified before inlined.
grunt.initConfig({
inline: {
dist: {
options:{
cssmin: true
},
src: 'src/index.html',
dest: 'dist/index.html'
}
}
});
__inline
)Only URLs that contain the value for tag
will be inlined.
Specify tag: ''
to include all urls.
grunt.initConfig({
inline: {
dist: {
options:{
tag: ''
},
src: 'src/index.html',
dest: 'dist/index.html']
}
}
});
Ability to add attributes string to inline tag.
grunt.initConfig({
inline: {
dist: {
options:{
inlineTagAttributes: {
js: 'data-inlined="true"', // Adds <script data-inlined="true">...</script>
css: 'data-inlined="true"' // Adds <style data-inlined="true">...</style>
},
src: 'src/index.html',
dest: 'dist/index.html'
}
}
}
});
If uglify is assigned true, .js
file will be minified before inlined.
grunt.initConfig({
inline: {
dist: {
options:{
uglify: true
},
src: 'src/index.html',
dest: 'dist/index.html'
}
}
});
Setting an exts array allows multiple file extensions to be processed as html.
grunt.initConfig({
inline: {
dist: {
options:{
exts: ['jade'],
uglify: true
},
src: 'src/index.jade',
dest: 'dist/index.jade'
}
}
});
config
grunt.initConfig({
inline: {
dist: {
src: 'src/index.html'
}
}
});
src/index.html
<html>
<head>
<title>demo</title>
<link href="https://github.com/chyingp/grunt-inline/blob/master/css/style.css?__inline=true" rel="stylesheet" />
</head>
<body>
<img src="https://github.com/chyingp/grunt-inline/raw/master/img/icon.png?__inline=true" />
<script src="https://github.com/chyingp/grunt-inline/raw/master/js/erport.js?__inline=true"></script>
</body>
</html>
after grunt inline
was run, it will be something like
<html>
<head>
<title>demo</title>
<style>
.container{
padding: 0;
}
</style>
</head>
<body>
<! -- base64, a terrible mass you know…so just show a little bit ...-->
<img src="https://github.com/chyingp/grunt-inline/raw/master/idata:image/png;base64data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAYCAYAAAChg0BHAA..." />
<script>
var Report = (function(){
return {
init: function(){
}
};
})();
</script>
</body>
</html>
Suppose there is an <inline>
tag in index.html
like bellow
<!-- inline tag -->
<inline src="https://github.com/chyingp/grunt-inline/raw/master/test.html" />
The content of test.html
is
<p>I'm inline html</p>
<span>hello world!</span>
Then, after the inline
task is run, the original content in index.html
will be replaced with
<p>I'm inline html</p>
<span>hello world!</span>
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.
<inline>
tag