grunt-datauri

create base64 encoded data-uris for css from images

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

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: Boolean Default value: true

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

Type: Boolean Default value: true

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

Type: Boolean Default value: false

Output as variables for Sass only.

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-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

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