In this example, nunjucks is used as the templating engine.
var gulp = require('gulp');
var concat = require('gulp-concat');
var imageDataURI = require('gulp-image-data-uri');
var nunjucks = require('nunjucks');
gulp.task('prepare', function() {
gulp.src('./images/*')
.pipe(imageDataURI({
template: {
file: './other/data-uri-template.css',
engine: nunjucks
}
}))
.pipe(concat('inline-images.css'))
.pipe(gulp.dest('./dist'));
});
gulp.task('default', ['prepare']);
Let's say 'data-uri-template.css' contains something like this:
.{{ className }} {
background: url("{{ dataURISchema }}");
}
Then the result would be something like:
.image-flag {
background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}