Neverending Programming Mistakes

    gulp-image-data-uri

    1.2.2 • Public • Published

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

    Install

    npm i gulp-image-data-uri

    DownloadsWeekly Downloads

    44

    Version

    1.2.2

    License

    MIT

    Last publish

    Collaborators

    • adam-lynch