grunt-datauri

create base64 encoded data-uris for css from images

This plugin is based on the great npm module datauri by Helder Santana (heldr).

Getting Started

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

Overview

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.

Options

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.

options.checkFilesize

Type: Boolean Default value: true

checkFilesize outputs warnings, if a source image exceeds 32kB of size (as this is the maximum for IE8 to function).

options.usePlaceholder

Type: Boolean Default value: true

Output as placeholders or simple CSS classes - for Sass only.

options.variables

Type: Boolean Default value: false

Output as variables for Sass only.

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.

Usage Example

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

Output

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.....");
...

Release History

• 2013-11-11 v0.4.0 update datauri dependency
• 2013-10-31 v0.3.2 option to save output to Sass variables
• 2013-05-26 v0.3.1 toggle for usage of placeholders
• 2013-05-17 v0.3.0 filesize check and updated console output
• 2013-05-16 v0.2.1 bump version for npm
• 2013-05-16 v0.2.0 add placeholder (Sass) support and support for multiple dest-files
• 2013-05-15 v0.1.0 basic functionality

Contributors

| | | | |---|---| | ceee | davemo | heldr |