Gulp-sprite-by-ext NPM

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: