Laravel Elixir Spritesmith

This is a simple Spritesmith wrapper for Laravel Elixir.

Install

Install this package over npm.

npm install laravel-elixir-spritesmith --save-dev

Require it in your gulpfile.js and use it.

var elixir = require('laravel-elixir');

require('laravel-elixir-spritesmith');

elixir(function(mix) {

  mix.spritesmith();

});

How To

If you run mix.spritesmith() without parameters, it looks for all PNG-Files in resources/assets/img/sprites (folders included).

The output of the sprite.css file is in resources/assets/css. The output of your sprite.png is in public/assets/img.

These are the default paths, they can be overwritten by elixir.config.assetsPath and elixir.config.css.outputFolder or by pass options. See the config file from elixir for more options.

Options

mix.spritesmith('src', {options});

Change Source

mix.spritesmith('resources/assets/images');

Change Output

mix.spritesmith(null, {
  imgOutput: 'public/images',
  cssOutput: 'public/styles'
});

By default, you can use your sprite images with the class sprite-{itemname}. Change them with cssOpt.

mix.spritesmith(null, {
  cssVarMap: function (sprite) {
    sprite.name = 'MY-SPRITE-' + sprite.name;
  }
}

And you can use all other options from Spritesmith.