gulp-sprite-by-ext

Sprite generator by extension file by gulp.

Installation

Install with npm:

npm install --save-dev gulp-sprite-by-ext

Usage

Sprite-By-Ext is a gulp task for generate sprite image and style by type of file image. below is a simple example for use:

const gulp        = require('gulp');
const spriteByExt = require('gulp-sprite-by-ext');
 
gulp.task('sprite-by-ext', function () {
    return gulp.src(['./images/**/*'])
    .pipe(spriteByExt())
    .pipe(gulp.dest('./dist'));
});

Options

Sprite-By-Ext can accept some options for use:

const gulp        = require('gulp');
const spriteByExt = require('gulp-sprite-by-ext');
 
gulp.task('default', function () {
    return gulp.src(['./images/**/*.{png,jpg,svg}'])
    .pipe(spriteByExt({
        css: {
            imagePath: '../images/',    // Path to write on CSS for image address
        },
        slug: (id, ext) => ext + '-' + id, // Pattern of class name and symbols id
        filename: 'sprite',
        filename2x: 'sprite@2x',
    }))
    .pipe(gulp.dest('./build'));
});

Plugin options are:

Property	Necessary	Type	Plugin default value
[css.imagePath]	no	String	../images/
[slug]	no	function	(id, ext) => ext + '-' + id
[filename]	no	String	sprite
[filename2x]	no	String	sprite@2x

More detailed explanation is below.

css.imagePath

Type: String Default value: ../images/

Defines which folder will have the image in css.

slug

Type: function Returns: String Default value: (id, ext) => ext + '-' + id

Defines class name pattern in css.

filename

Type: String Default value: sprite

Defines name pattern of sprite output file.

filename

Type: String Default value: sprite@2x

Defines name pattern of sprite retina output file.