create base64 encoded data-uris for css from images
npm install grunt-datauri##### NOTE: couldn't submit task to grunt yet, as they are currently down ...
~0.4.0
shell
npm install grunt-datauri --save-dev
`
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js
grunt.loadNpmTasks('grunt-datauri');
`
The "datauri" task
$3
The _datauri_ task let's you create css datauri's from images. Supported for all image types. Tested are png, jpg, gif, bmp.
If you specify sass or scss files as destination, than sass placeholders are used instead of classes.
The class names are generated from the filename. You can specify prefix and suffix for these names.
$3
#### options.classPrefix
Type: String
Default value: ""
This string is prefixed to all generated class names.
#### options.classSuffix
Type: String
Default value: ""
This string is suffixed to all generated class names.
$3
#### src
Type: String or Array
Contains a single image or an array of images.
#### dest
Type: String or Array
Contains all output css files.
#### files
Type: Array
This array can be used as a substitution for src and dest to allow multi-processing per task.
$3
_Gruntfile.js_
`js
grunt.initConfig( {
datauri: {
default: {
options: {
classPrefix: 'data-'
},
src: [
"test/fixtures/test-png.png",
"test/fixtures/test-gif.gif",
"test/fixtures/test-jpg.jpg",
"test/fixtures/test-bmp.bmp"
],
dest: [
"tmp/base64.css",
"tmp/base64.scss",
"tmp/base64.sass"
]
}
}
} )
`
##### Output
_tmp/base64.css_
`css
.data-test-png {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
}
.data-test-gif {
background-image: url("data:image/png;base64,R0lGODlhZABkAJEA.....");
}
...
`
_tmp/base64.scss_
`scss
%data-test-png {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
}
...
`
_tmp/base64.sass_
`scss
%data-test-png
background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
...
``