Laravel Elixir Base64

A small helper to inline images as base64 for Laravel Elixir.

Installation & Setup

First, install laravel-elixir-base64 as a development dependency:

npm install --save-dev laravel-elixir-base64

Create a images folder in your assets folder resources/assets/images. The script will by default check in this folder for images that are enabled for base64 inlining in your css files.

Now you are ready for using it in your gulpfile.js, add a new mixin to it like following

elixir(function(mix) {
    mix.inlineBase64('app.css', 'compiled.css');
});

Configuration

This plugin offers a few configuration settings, that can be set as thirth argument The syntax is as following:

    mix.inlineBase64(Src, Filename, Options);

Argument	Description
Src	The css file that needs optimizing, by default it will prefix the given filename with the elixir cssOutput directory what is by default /public/css/ You can also use a wildcard to scan all CSS files inside the css folder *.css or **/*.css.
Filename	The filename where the optimized sourcefile should be written to. By default this would be named optimized.css and also stored at the elixir cssOutput configuration setting.

The Options argument is optional and contains the following settings:

Value	Default
baseDir	elixir.config.assetsDir + "images/" (resources/assets/)
maxSize	14 * 1024
debug	false

Watchers

When doing a gulp watch the plugin will hook into laravel elixir and registers watchers for your src files or the baseDir(resources/assets/images) and runs the base64 inliner again when it detects some changes.

Force asset injection

In your css file, just add ",true" to the image url : it will force the asset to be injected in base64 in css file, event if the maxSize is reached.

div.logo {
    background: transparent url(/img/logo.png,true) no-repeat center center;
}

This package makes is a wrapper for Laravel for the gulp-inline-base64 module. https://www.npmjs.com/package/gulp-inline-base64.