gulp task for creating image sprites and the corresponding stylesheets
JavaScript
Switch branches/tags
Nothing to show
Permalink
Failed to load latest commit information.
test closes #1 Jan 22, 2014
.editorconfig init Jan 19, 2014
.gitignore init Jan 19, 2014
.jshintrc init Jan 19, 2014
.travis.yml adds travis ci Jan 19, 2014
index.js fixes seg fault when file is added while watching directory Feb 7, 2014
package.json version bump / depracted Feb 18, 2014
readme.md Update readme.md Feb 9, 2014

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