gulp-sprite

gulp task for creating a image sprite and the corresponding stylesheets

DEPRECATION NOTICE

Please use css-sprite instead of this gulp plugin.

Requirements

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

Please refer the installation guide.

Install

Install with npm

npm install --save-dev gulp-sprite

Example

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

API

sprite(sprite-name, options)

sprite-name

description: The name of the sprite file.

Configuration Options

imagePath

default: ''

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

cssPath

default: ''

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

prefix

default: ''

description: The prefix for the stylesheet file

preprocessor

default: 'css'

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

orientation

default: vertical

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

margin

default: 5

description: The space between images within the sprite

License

MIT © Alexander Slansky