Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-css-base64 with all npm packages installed. Try it out:

var gulpCssBase64 = require("gulp-css-base64")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-css-base64 v1.3.4

Gulp's task for transform all resources found in a CSS into base64-encoded data URI strings

gulp-css-base64

Build Status Coverage Status Dependencies NPM Version Download Month ![Gitter](https://badges.gitter.im/Join Chat.svg)

This gulp task converts all data found within a stylesheet (those within a url( ... ) declaration) into base64-encoded data URI strings. This includes images and fonts.

Inspired by grunt-image-embed and written following gulp's guidelines.

Features

  • Supports local and remote resources.
  • Supports buffer (and stream WIP).
  • [>] Ability to define a relative base directory to gulpfile.js. Default is the current directory.
  • [>] Ability to specify a weight limit. Default is 32kB which is IE8's limit.
  • [>] Ability to filter on file extensions. Default there is no filter.
  • [>] Ignore a resource by specifying a directive comment in CSS.
  • Existing data URIs will be ignored.
  • Existing SVG masks will be ignored.

Install

Install this plugin with the command:

npm install --save-dev gulp-css-base64

Usage

var cssBase64 = require('gulp-css-base64');

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

//With options
gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64({
            baseDir: "../../images",
            maxWeightResource: 100,
            extensionsAllowed: ['.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.maxWeightResource

Type: Number

Default value: 32768

options.extensionsAllowed

Type: Array

Default value: []

Ignore a specific resource

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

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

License

Copyright (c) 2014 Mehdy Dara under the MIT License.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free