gulp-minisprites

Turns multiple images into a single spritesheet. Supports png and svg source files and can output svg, png, and css. This is relatively featureless spritesheet generator.

Uses fabric.js to create images.

Licensed under the GNU Public License.

Install

npm install gulp-minisprites

Example

var gulp = require('gulp');
var minisprites = require('gulp-minisprites');

gulp.task('styles', function () {
	gulp.src('./images/sprites/*.{svg,png}')
		.pipe(minisprites({
			output: 'css', // generates CSS classes
			baseClass: 'sprite', // base CSS class that all sprites inherit
			imageUrl: '../images/spritesheet.svg', // for background-image url() in CSS
			pngFallback: true, // adds PNG fallback CSS for IE
			isRetina: false, // set this to true if your source image is already 2x
			filename: '_sprites.scss'
		}))
		.pipe(gulp.dest('./styles'));
});

gulp.task('images', function () {
	gulp.src('./images/sprites/*.{svg,png}')
		.pipe(minisprites({
			output: 'svg', // creates single svg image
			pngFallback: true, // generates a separate PNG image with the same filename in the same location
			isRetina: false, // set this to true if your source image is already 2x
			filename: 'spritesheet.svg'
		}))
		.pipe(gulp.dest('./images'));
});