https://github.com/aslansky/gulp-sprite
gulp task for creating image sprites and the corresponding stylesheets
https://github.com/aslansky/gulp-sprite
Last synced: 10 months ago
JSON representation
gulp task for creating image sprites and the corresponding stylesheets
- Host: GitHub
- URL: https://github.com/aslansky/gulp-sprite
- Owner: aslansky
- Created: 2014-01-19T19:01:45.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-11-20T15:49:25.000Z (over 10 years ago)
- Last Synced: 2025-05-18T13:08:49.283Z (11 months ago)
- Language: JavaScript
- Size: 419 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-wpo-chinese - Gulp-sprite - gulp task for creating a image sprite and the corresponding stylesheets for Gulp. (Sprite Generators)
- awesome-wpo - Gulp-sprite - Gulp task for creating an image sprite and the corresponding style sheets for Gulp. (Generators / Meetups)
- awesome-wpo-dup - Gulp-sprite - gulp task for creating a image sprite and the corresponding stylesheets for Gulp. (Sprite Generators)
- fucking-awesome-wpo - Gulp-sprite - gulp task for creating an image sprite and the corresponding style sheets for Gulp. (Generators / Meetups)
README
# [gulp](http://gulpjs.com)-sprite [](http://badge.fury.io/js/gulp-sprite) [](https://travis-ci.org/aslansky/gulp-sprite) [](https://david-dm.org/aslansky/gulp-sprite)
> [gulp](http://gulpjs.com) task for creating a image sprite and the corresponding stylesheets
## DEPRECATION NOTICE
Please use [css-sprite](https://github.com/aslansky/css-sprite) instead of this gulp plugin.
## Requirements
`gulp-sprite` requires [node-canvas](https://github.com/learnboost/node-canvas) which depends on [Cairo](http://cairographics.org/).
Please refer the [installation guide](https://github.com/learnboost/node-canvas/wiki).
## Install
Install with [npm](https://npmjs.org/package/gulp-sprite)
```
npm install --save-dev gulp-sprite
```
## Example
```js
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](http://slansky.net)
[](https://bitdeli.com/free "Bitdeli Badge")