gulp-image-inline

A Gulp plugin for converting images to inline data-URIs. Intended to be a simple single-purpose wrapper for heldr/datauri.

Installation

npm install gulp-image-inline

Usage

var gulp = require('gulp');
var imageDataURI = require('gulp-image-inline');

gulp.task('prepare', function() {
    gulp.src('./images/*')
        .pipe(imageDataURI()) 
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['prepare']);

For example output, see test/expected. See Examples for more information.

Options

customClass

An optional function. If omitted, the class added is just the file's basename.

The function is called with two arguments; the default class name and the Vinyl file object. It must return the new class (string). See Examples for more information.

dimension

If flag equal true, width and height will be injected into class;

.icon {
    width: 32px;
    height: 32px;
    background-image: url(...);
}

Contributing

See CONTRIBUTING.md

Examples

Example output

For example output, see test/expected.

Combining into one CSS file

Use gulp-concat;

var gulp = require('gulp');
var imageDataURI = require('gulp-image-inline');
var concat = require('concat');

gulp.task('prepare', function() {
    gulp.src('./images/*')
        .pipe(imageDataURI()) 
        .pipe(concat('inline-images.css')) 
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['prepare']);

Custom classes

var gulp = require('gulp');
var imageDataURI = require('gulp-image-inline');
var path = require('path');

gulp.task('prepare', function() {
    gulp.src('./images/*')
        .pipe(imageDataURI({
            customClass: function(className, file){
                var customClass = 'icons-' + className; // add prefix

                // add suffix if the file is a GIF
                if(path.extname(file.path) === '.gif'){
                    customClass += '-gif';
                }
                         
                return customClass;
            }
        )) 
        .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['prepare']);

Including / excluding certain images

Use gulp-filter;

var gulp = require('gulp');
var imageDataURI = require('gulp-image-inline');
var filter = require('gulp-filter');

gulp.task('prepare', function() {
    var pngFilter = filter('*.png'); 

    gulp.src('./images/*')
        .pipe(pngFilter) 
        .pipe(imageDataURI()) 
        .pipe(gulp.dest('./css')) // put the CSS generated somewhere
        .pipe(pngFilter.restore()) 
        .pipe(gulp.dest('./dist')); // also put all of the images somewhere else
});

gulp.task('default', ['prepare']);

Custom CSS

This isn't possible right now because heldr/datauri doesn't support it. If you want this feature, comment on heldr/datauri#6.

Anything missing?

Create an issue / pull-request :smiley:.