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('./'));
});