A grunt task which takes a html file, finds all the css, js links and images, and outputs a version with all the css, js and images (Base64) written inline.
npm install grunt-assets-inline> A grunt task which takes a html file, finds all the css, js links and images, and outputs a version with all the css, js and images (Base64) written inline.
This is a fork of original grunt-html-smoosher by Ben Breedlove with fixes and new features.
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:
``shell`
npm install grunt-assets-inline --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks('grunt-assets-inline');
In your project's Gruntfile, add a section named assets_inline to the data object passed into grunt.initConfig().
`js`
grunt.initConfig({
assets_inline: {
options: {
jsTags: { // optional
start: '' // default:
},
},
all: {
files: {
'dest-index.html': 'source-index.html',
},
},
},
});
#### minify
Defaults to false.
Minify scripts with UglifyJS.
`js
grunt.initConfig({
assets_inline: {
all: {
options: {
minify: true
},
files: {
'dest-index.html': 'source-index.html',
},
},
},
});
`
#### Path config
Defaults to "".
When you have absolute paths for your external assets, it helps to add the local address of your asset files; relative to uncompiled HTML file.
`js`
grunt.initConfig({
assets_inline: {
all: {
options: {
jsDir: "../",
cssDir: "/project/styles/",
assetsDir: "/project/"
},
files: {
'dest-index.html': 'source-index.html',
},
},
},
});
Example
If the local cwd for your uncompiled file is /project/html then the above settings would resolve:
"
}
`
#### deleteOriginals
Defaults to
`js`
{
deleteOriginals: false
}
You can delete smooshed files after the main task. Please note that once a file is smooshed into the HTML, it will marked as pending delete, no matter if it is included elsewhere without smooshing.
#### verbose
Defaults to
`js`
{
verbose: false
}
Get detailed output log.
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.
- See CHANGELOG.md for further release historyassetsDir
- 2015-08-12 v0.1.7 Add , inlineSvg, and inlineSvgBase64 supportassetsUrlPrefix
- 2015-07-31 v0.1.6 Fix test and new default for
- 2015-07-31 v0.1.5 Add support for fixing relative assets URLs in smooshed CSSignoreImg
- 2015-07-28 v0.1.4 Add supportincludeTag` support, only selected files will be smooshed if this option is defined
- 2015-07-20 v0.1.3 Add