Skip to content
Snippets Groups Projects
user avatar
Alexander Slansky authored
13b03e26
History

css-sprite

NPM version Build Status Coverage Status Dependencies

A css sprite generator.

Generates a sprite file and the propper css file out of a directory with images

Requirements

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

Please refer to the installation guide.

Install

Install with npm

npm install css-sprite --save

If you want to use css-sprite on your cli use:

npm install css-sprite -g

Command Line Interface

Usage: css-sprite <out> <src>... [options]

out     path of directory to write sprite file to
src     glob strings to find source images to put into the sprite

Options:
   -c, --css-image-path   http path to images on the web server (relative to css path or absolute path)  [../images]
   -n, --name             name of the sprite file  [sprite.png]
   -p, --processor        output format of the css. one of css, less, sass, scss or stylus  [css]
   -st, --style           file to write css to, if ommited no css is written
   -w, --watch            continuously create sprite
   --margin               margin in px between tiles  [5]
   --orientation          orientation of the sprite image  [vertical]

Programatic usage

var sprite = require('css-sprite');
sprite.create(options, cb);

Options

  • src: Array or string of globs to find source images to put into the sprite. [required]
  • out: path of directory to write sprite file to [process.cwd()]
  • name: name of the sprite file [sprite.png]
  • style: file to write css to, if ommited no css is written
  • cssPath: http path to images on the web server (relative to css path or absolute) [../images]
  • processor: output format of the css. one of css, less, sass, scss or stylus [css]
  • orientation: orientation of the sprite image [vertical]
  • margin: margin in px between tiles [5]

Example

var sprite = require('css-sprite');
sprite.create({
  src: ['./src/img/*.png'],
  out: './dist/img'
  name: 'sprites.png',
  style: './dist/scss/_sprites.scss',
  cssPath: '../img',
  processor: 'scss'
}, function () {
  console.log('done');
});

Usage with Gulp

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprite = require('css-sprite').stream;

gulp.task('sprites', function () {
  return gulp.src('./src/img/*.png')
    .pipe(sprite({
      name: 'sprites.png',
      style: '_sprites.scss',
      cssPath: './img',
      processor: 'scss'
    }))
    .pipe(gulpif('*.png', gulp.dest('./dist/img/')))
    .pipe(gulpif('*.scss', gulp.dest('./dist/scss/')));
});

Options to use css-sprite with Gulp are the same as for the sprite.create function with the exception of src and out.

Usage with Grunt

Add css-sprite as a dependency to your grunt project and then use something like this in your gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    css_sprite: {
      options: {
        'cssPath': '../images',
        'processor': 'css',
        'orientation': 'vertical',
        'margin': 5
      },
      build: {
        options: {
          'style': 'dest/css/sprite.css'
        },
        src: ['src/images/*', 'src/images2/*'],
        dest: 'dest/images/sprite.png',
      }
    }
  });

  // Load the plugin that provides the "css-sprite" task.
  grunt.loadNpmTasks('css-sprite');
  
  // Default task(s).
  grunt.registerTask('default', ['css_sprite']);
};

Options to use css-sprite with Grunt are the same as for the sprite.create function with the exception of src and out.

Bitdeli Badge