gulp-spriter-inline

gulp-spriter-inline, a gulp plugin, looks through the CSS you pipe in and gathers all of the background images which url has '?__spriter'. It then creates a sprite sheet and updates the references in the CSS.

Install

npm install gulp-spriter-inline

About

gulp-spriter-inline is made a little change base on gulp-css-spriter

Usage

Basic usage

This is most likely the setup you will probably end up using.

var gulp = require('gulp');
var spriter = require('gulp-spriter-inline');

gulp.task('css', function() {
	return gulp.src('./src/css/styles.css')
		.pipe(spriter({
			// The path and file name of where we will save the sprite sheet
			'spriteSheet': './dist/images/spritesheet.png',
			// Because we don't know where you will end up saving the CSS file at this point in the pipe,
			// we need a litle help identifying where it will be.
			'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
		}))
		.pipe(gulp.dest('./dist/css'));
});

	.sh{
		display: flex;
		width: 179px;
		height: 33px;
		background: url('../images/44.png?__spriter') no-repeat;
	}

Barebones usage

The slimmest usage possible.

var gulp = require('gulp');
var spriter = require('gulp-spriter-inline');

gulp.task('css', function() {
	return gulp.src('./styles.css')
		.pipe(spriter())
		.pipe(gulp.dest('./'));
});