gulp-css-file2base64

Gulp plugin. Adds a function file2base64, which loads the file and inserts the contents of a file as a base64 string.

Table of Contents

• Install
• Options
• Example usage
• How to use with sass

Install

npm install --save-dev gulp-css-file2base64

Options

• debug (Boolean)

  Option log to console. In debug mode will be displayed warning unsuccessful convert your files into base64 string. This option is disabled by default.

  Enabling debug mode:

      ...
      .pipe(file2base64({debug: true}))
      ...

Example usage

This example shows how to automatically insert the contents of files as a string encoded in base64

gulpfile.js

var gulp = require('gulp');
var file2base64 = require('gulp-css-file2base64');

gulp.task('file2base64', function () {
  gulp.src('./static/css/*.css')
    .pipe(file2base64())
    .pipe(gulp.dest('./static/cache/'));
});

Contents of file "./static/css/main.css"

/* Example of inserting font */
@font-face {
  font-family: 'RubPTSans';
  src: url("data:font/opentype;base64,file2base64('../fonts/RubPTSans-Bold-Italic.ttf')") format("truetype");
  font-weight: bold;
  font-style: italic;
}

/* Example of inserting image */
.ico-home {
    background-image: url("data:image/png;base64,file2base64('../icons/ico-home.png')");
}

Result contents of file "./static/cache/main.css"

/* Example of inserting font */
@font-face {
  font-family: 'RubPTSans';
  src: url("data:font/opentype;base64,AAEAAAAQAQAABAAATFRTSANFAgsAAAIMAAAADU9TLzKGcICtAAABiAAAAGBWRE1YdPh8dgAAAhwAAAXgY21hcAl/E/EAAAkYAAABJGN2dCAAFAAAAAALtAAAAAJmcGdtBlmcNwAACjwAAAFzZ2x5ZgVUitYAAAu4AAABMGhkbXgFN250AAAH/AAAARxoZWFk+k9YkAAAAQwAAAA2aGhlYQZTAvMAAAFEAAAAJGhtdHgHgAAQAAAB6AAAACRsb2NhATABMAAADOgAAAAUbWF4cAIWAZ4AAAFoAAAAIG5hbWXaYu7lAAAM/AAAAWJwb3N0+R8+aAAADmAAAABRcHJlcLgAACsAAAuwAAAABAABAAAAAQAAABh1KV8PPPUAGQPoAAAAAMkbarAAAAAAz5+qNAAQAAACWALGAAAACQACAAAAAAAAAAEAAAMg/zgAyAPoABD/yQJYAAEAAAAAAAAAAAAAAAAAAAAJAAEAAAAJACoAAgAAAAAAAQAAAAAACgAAAgABcwAAAAAAAwESAZAABQAAArwCigAAAIwCvAKKAAAB3QAyAPoAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAcHlycwCAAAAEQwMg/zgAyAPoAMgAAAABAAAAAAGQAyAAAAAgAAAASwAAA+gAAAAAAAAASwAAAEsAAAIhABAASwAAAEsAAAAAAAAAAAAJAQEBAQFEAQEBAAAAAAAAAQABAQEBAQAMAPgI/wAIAAj//gAJAAn//gAKAAr//gALAAv//QAMAAz//QANAA3//QAOAA7//QAPAA///QAQABD//AARABH//AASABL//AATABP//AAUABT//AAVABX/+wAWABb/+wAXABf/+wAYABj/+wAZABn/+wAaABr/+gAbABv/+gAcABz/+gAdAB3/+gAeAB7/+gAfAB//+QAgACD/+QAhACH/+QAiACL/+QAjACP/+QAkACT/+AAlACX/+AAmACb/+AAnACf/+AAoACj/+AApACn/9wAqACr/9wArACv/9wAsACz/9wAtAC3/9wAuAC7/9gAvAC//9gAwADD/9gAxADH/9gAyADL/9gAzADP/9QA0ADT/9QA1ADX/9QA2ADb/9QA3ADf/9QA4ADj/9AA5ADn/9AA6ADr/9AA7ADv/9AA8ADz/9AA9AD3/8wA+AD7/8wA/AD//8wBAAED/8wBBAEH/8wBCAEL/8gBDAEP/8gBEAET/8gBFAEX/8gBGAEb/8gBHAEf/8QBIAEj/8QBJAEn/8QBKAEr/8QBLAEv/8QBMAEz/8ABNAE3/8ABOAE7/8ABPAE//8ABQAFD/8ABRAFH/7wBSAFL/7wBTAFP/7wBUAFT/7wBVAFX/7wBWAFb/7gBXAFf/7gBYAFj/7gBZAFn/7gBaAFr/7gBbAFv/7QBcAFz/7QBdAF3/7QBeAF7/7QBfAF//7QBgAGD/7ABhAGH/7ABiAGL/7ABjAGP/7ABkAGT/7ABlAGX/6wBmAGb/6wBnAGf/6wBoAGj/6wBpAGn/6wBqAGr/6gBrAGv/6gBsAGz/6gBtAG3/6gBuAG7/6gBvAG//6QBwAHD/6QBxAHH/6QByAHL/6QBzAHP/6QB0AHT/6AB1AHX/6AB2AHb/6AB3AHf/6AB4AHj/6AB5AHn/5wB6AHr/5wB7AHv/5wB8AHz/5wB9AH3/5wB+AH7/5gB/AH//5gCAAID/5gCBAIH/5gCCAIL/5gCDAIP/5QCEAIT/5QCFAIX/5QCGAIb/5QCHAIf/5QCIAIj/5ACJAIn/5ACKAIr/5ACLAIv/5ACMAIz/5ACNAI3/4wCOAI7/4wCPAI//4wCQAJD/4wCRAJH/4wCSAJL/4gCTAJP/4gCUAJT/4gCVAJX/4gCWAJb/4gCXAJf/4QCYAJj/4QCZAJn/4QCaAJr/4QCbAJv/4QCcAJz/4ACdAJ3/4ACeAJ7/4ACfAJ//4ACgAKD/4AChAKH/3wCiAKL/3wCjAKP/3wCkAKT/3wClAKX/3wCmAKb/3gCnAKf/3gCoAKj/3gCpAKn/3gCqAKr/3gCrAKv/3QCsAKz/3QCtAK3/3QCuAK7/3QCvAK//3QCwALD/3ACxALH/3ACyALL/3ACzALP/3AC0ALT/3AC1ALX/2wC2ALb/2wC3ALf/2wC4ALj/2wC5ALn/2wC6ALr/2gC7ALv/2gC8ALz/2gC9AL3/2gC+AL7/2gC/AL//2QDAAMD/2QDBAMH/2QDCAML/2QDDAMP/2QDEAMT/2ADFAMX/2ADGAMb/2ADHAMf/2ADIAMj/2ADJAMn/1wDKAMr/1wDLAMv/1wDMAMz/1wDNAM3/1wDOAM7/1gDPAM//1gDQAND/1gDRANH/1gDSANL/1gDTANP/1QDUANT/1QDVANX/1QDWANb/1QDX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") format("truetype");
  font-weight: bold;
  font-style: italic;
}

/* Example of inserting image */
.ico-home {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJlJREFUOI3N0k8KQVEYhvHfFUZMmRjJBpSBjSibsgvKwAZkrEhWICMGsgkm59Ttdv/J5L711On0PV/vqUOTk2AVSH6Vu9jgE1ijU1fu45CSI3v0quQhrjly5IJBkTzBvUSO3DDOyjO8a8iRF6Z5LXY15G1aaBW9B0csAqeioXbJgmdoBMuiobIGtfL3guwXnWMUzg+cK+4bkC+4QTlQ8DpbDgAAAABJRU5ErkJggg==");
}

How to use with sass?

gulpfile.js

var gulp = require('gulp');
var file2base64 = require('gulp-css-file2base64');

gulp.task('sass', function () {
  gulp.src('./static/sass/*.scss')
    .pipe(sass())
    .pipe(file2base64())
    .pipe(gulp.dest('./static/cache/'));
});