grunt-datauri

create base64 encoded data-uris for css from images

grunt-datauri

create base64 encoded data-uris for css from images

This plugin requires Grunt ~0.4.0

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-datauri --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-datauri');

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.

Type: String Default value: ""

This string is prefixed to all generated class names.

Type: String Default value: ""

This string is suffixed to all generated class names.

Type: String or Array

Contains a single image or an array of images.

Type: String or Array

Contains all output css files.

Type: Array

This array can be used as a substitution for src and dest to allow multi-processing per task.

Gruntfile.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"
            ]
        }
    }
} )

tmp/base64.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

%data-test-png {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
}
...

tmp/base64.sass

%data-test-png
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
...
  • 2013-05-16 v0.2.0 add placeholder (sass) support and support for multiple dest-files
  • 2013-05-15 v0.1.0 basic functionality