‚̧Net Possibility Multiplier
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    gulp-css-base64

    2.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    gulp-css-base64

    Build Status Coverage Status Dependencies NPM Version Download Month

    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.

    Install

    npm i gulp-css-base64

    DownloadsWeekly Downloads

    4,299

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar