Skip to content

Latest commit

 

History

History
44 lines (34 loc) · 1006 Bytes

custom-template-and-templating-engine.md

File metadata and controls

44 lines (34 loc) · 1006 Bytes

Custom template and templating engine

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

Back to readme