Skip to content
gulp task for creating image sprites and the corresponding stylesheets
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.editorconfig
.gitignore
.jshintrc
.travis.yml
index.js
package.json
readme.md

readme.md

gulp-sprite NPM version Build Status Dependencies

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

Bitdeli Badge

You can’t perform that action at this time.