gs

gulp-sprite

gulp task for creating image sprites and the corresponding stylesheets

Showing:

Popularity

Downloads/wk

7

GitHub Stars

15

Maintenance

Last Commit

8yrs ago

Contributors

0

Package

Dependencies

5

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
use css-sprite instead

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial