gulp task for creating image sprites and the corresponding stylesheets


gulp task for creating a image sprite and the corresponding stylesheets

Please use css-sprite instead of this gulp plugin.

gulp-sprite requires node-canvas which depends on Cairo.

Please refer the installation guide.

Install with npm

npm install --save-dev gulp-sprite
var gulp = require('gulp');
var sprite = require('gulp-sprite');
gulp.task('sprites', function () {
      .pipe(sprite('sprites.png', {
        imagePath: 'dist/img',
        cssPath: './src/scss/utils/',
        preprocessor: 'scss'

description: The name of the sprite file.

default: ''

description: The http path to images on the web server (relative to css path or absolute).

default: ''

description: The path where stylesheet file should be created. If ommited no stylesheet file will be created.

default: ''

description: The prefix for the stylesheet file

default: 'css'

description: The output style for the stylesheets. One of: css, less, sass, scss or stylus.

default: vertical

description: The orientation in which the images are aligned in the sprite On of: vertical, horizontal

default: 5

description: The space between images within the sprite

MIT © Alexander Slansky