Nero Punished Miscreants

    gulp-base64-inline

    1.0.6 • Public • Published

    Inline images via base64

    This gulp plugin inline images via base64. It inlines only images you want. Wrap image name with inline function in source code.

    Syntax

    base64('path-to-image' [, options])
    

    Parameters

    path-to-image

    • A String that is path of the image folder.
    • Default value: /.

    options [optional]

    Option Description Default value
    prefix A String that will insert before base64 String url(
    suffix A String that will append after base64 String )
    includeMime true: will insert datatype String before the main base64 String. Ex: data:image/jpeg;base64, true

    Examples

    Without option:

    JS:

    var gulp = require('gulp');
    var base64 = require('gulp-base64-inline');
     
    gulp.task('css', function () {
        return gulp.src('css/style.css')
            .pipe(base64('../assets/img'))
            .pipe(gulp.dest('assets/css/'));
        }
    );

    Input:

    .star {
        background: inline('star.svg');
    }

    Output:

    .star {
        background: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQzIiB2aWV3Qm94PSIwIDAgNDUgNDMiIHdpZHRoPSI0NSI+PHN2ZyBoZWlnaHQ9IjMzIiB2aWV3Qm94PSIwIDAgMzUgMzMiIHdpZHRoPSIzNSIgeD0iNSIgeT0iNSI+PHRpdGxlPnN0YXI8L3RpdGxlPjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZD0iTTE3LjUgMjYuMjVMNy4yMTQgMzEuNjU4bDEuOTY0LTExLjQ1NC04LjMyLTguMTEyIDExLjUtMS42N0wxNy41IDBsNS4xNDMgMTAuNDIgMTEuNSAxLjY3Mi04LjMyIDguMTEyIDEuOTYzIDExLjQ1NHoiLz48L3N2Zz48L3N2Zz4=);
    }

    With options:

    JS:

    var gulp = require('gulp');
    var base64 = require('gulp-base64-inline');
     
    gulp.task('html', function () {
        return gulp.src('index.html')
            .pipe(base64('../assets/img',{
                prefix: "",
                suffix: ""
            }))
            .pipe(gulp.dest('assets/css/'));
        }
    );

    Input:

    <img src="inline('star.png')">

    Output:

    <img src="data:image/png;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQzIiB2aWV3Qm94PSIwIDAgNDUgNDMiIHdpZHRoPSI0NSI+PHN2ZyBoZWlnaHQ9IjMzIiB2aWV3Qm94PSIwIDAgMzUgMzMiIHdpZHRoPSIzNSIgeD0iNSIgeT0iNSI+PHRpdGxlPnN0YXI8L3RpdGxlPjxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZD0iTTE3LjUgMjYuMjVMNy4yMTQgMzEuNjU4bDEuOTY0LTExLjQ1NC04LjMyLTguMTEyIDExLjUtMS42N0wxNy41IDBsNS4xNDMgMTAuNDIgMTEuNSAxLjY3Mi04LjMyIDguMTEyIDEuOTYzIDExLjQ1NHoiLz48L3N2Zz48L3N2Zz4=">

    Install

    npm i gulp-base64-inline

    DownloadsWeekly Downloads

    1,501

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    6.33 kB

    Total Files

    3

    Last publish

    Collaborators

    • goschevski