grunt-inline
Advanced tools
Brings externally referenced resources, such as js, css and images, into a single file.
For exmample:
<link href="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.
## Getting Started
This plugin requires Grunt `~0.4.1`
If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-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');
## The "grunt-inline" task
### Overview
In your project's Gruntfile, add a section named `inline` to the data object passed into `grunt.initConfig()`.
grunt.initConfig({
inline: {
dist: {
src: [ 'dist/index.html' ]
}
}
})
### Options
#### dest
If dest is assigned, the the source file will be copied to the destination path. eg:
`dist/index.html` will be processed and then copied to `dest/index.html`
```
grunt.initConfig({
inline: {
dist: {
src: ['dist/index.html'],
dest: ['dest/']
}
}
});
```
### cssmin
If cssmin is assigned true, `.css` will be minified before inlined.
```
grunt.initConfig({
inline: {
dist: {
options:{
cssmin: true
},
src: ['dist/index.html'],
dest: ['dest/']
}
}
});
```
### tag (defaults to ```__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: ['dist/index.html'],
dest: ['dest/']
}
}
});
```
### uglify
If uglify is assigned true, `.js` file will be minified before inlined.
```
grunt.initConfig({
inline: {
dist: {
options:{
uglify: true
},
src: ['dist/index.html'],
dest: ['dest/']
}
}
});
```
### Usage Examples
> config
grunt.initConfig({
inline: {
dist: {
src: [ 'dist/index.html' ],
dest: [ 'dev/' ]
}
}
})
> src/index.html
<html>
<head>
<title>demo</title>
<link href="css/style.css?__inline=true" rel="stylesheet" />
</head>
<body>
<img src="img/icon.png?__inline=true" />
<script src="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="idata:image/png;base64data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAYCAYAAAChg0BHAA..." />
<script>
var Report = (function(){
return {
init: function(){
}
};
})();
</script>
</body>
</html>
#### inline tag
Suppose there is an `<inline>` tag in `index.html` like bellow
```
<!-- inline tag -->
<inline src="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>
```
## 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](http://gruntjs.com/).
## Release History
* 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 <script src="index.js?__inline">\n</script> 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
FAQs
Inlines img, script and link tags into the same file.
The npm package grunt-inline receives a total of 350 weekly downloads. As such, grunt-inline popularity was classified as not popular.
We found that grunt-inline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.