gulp-image-data-uri

Converts images to inline data URIs

Usage no npm install needed!

<script type="module">
  import gulpImageDataUri from 'https://cdn.skypack.dev/gulp-image-data-uri';
</script>

README

gulp-image-data-uri

NPM version Build Status Windows Build Status Dependency Status


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

Installation

npm install gulp-image-data-uri

Usage

var gulp = require('gulp');
var imageDataURI = require('gulp-image-data-uri');

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.

template

An optional object. See the Custom CSS template examples below.

template.file

A string which is a path to a template file (note: this doesn't have to be a .css file). This must be given if you want to use a custom template. An example file:

.{{className}} {
    background: url("{{dataURISchema}}");
}

The className and dataURISchema variables will always be passed to your template.

  • className is the name of the file or if you use the customClass option then it's whatever your function returns.
  • dataURISchema is the data URI.

Note: classNameSuffix is also reserved (by a module used underneath) but don't use it.

template.variables

An optional object of variable names to variables like this:

{
    defaultMargin: '.1rem'
}

These will be passed to your template along with the className, dataURISchema and classNameSuffix variables this module gives you (these are reserved variables).

template.engine

An optional function which accepts the data (as an object) as its only parameter and returns a string.

Consider lodash.template as example. If your favorite templating engine does support a compile + render shorthand, you just need to point the handler after a given template path, otherwise you will need to create a template adapter.

template.adapter

An optional function which accepts which accepts the the template content (string) as its only parameter and returns a template function (or engine).

Some templating engines does not have a shorthand to compile + render at the same call. In this specific cases we can create a template wrapper as the example bellow:

Examples

For example output, see test/expected.

Custom CSS templates

These examples expand on the Combining into one CSS file example but you don't have to concatenate them if you like.

Contributing

See CONTRIBUTING.md

Anything missing?

Create an issue / pull-request :smiley:.