This plugin converts all data found within a text file (those within a url( ... ) declaration) into base64-encoded data URI strings. This includes images and fonts.

Note: gulp version at least 3.5

This plugin is an upgraded version of gulp-css-base64

Install

Install this plugin with the command:

npm install --save-dev gulp-url-base64

Usage

var urlBase64 = require('gulp-url-base64');

//Without options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(urlBase64())
        .pipe(gulp.dest('dist'));
});

//With options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(urlBase64({
            baseDir: "../../src",
            max: 100,
            extensions: ['gif', 'jpg']
        }))
        .pipe(gulp.dest('dist'));
});

Options

options.baseDir

Type: String

Default value: ``

Note: If you have absolute image paths in your stylesheet, the path specified in this option will be used as the base directory. By default plugin used the current directory of gulpfile.js to find local resources.

options.max

Type: Number

Unit: Kb

Default value: Number.POSITIVE_INFINITY

Note:When the max value is not set, the plugin will not limit the size.

options.extensions

Type: Array || String

example：['jpg','ttf] or 'jpg'

Default value: []

Ignore a specific resource

You can ignore a resource with a comment /*base64:skip*/ in text file after url definition.

.ignored{
  background: url(image.png); /*base64:skip*/
}
.encoded{
  background: url(image.jpg);
}