grunt-contrib-sprites-preprocessor

grunt-contrib-sprites-preprocessor

A grunt wrapper around https://github.com/madebysource/sprites-preprocessor

The only sprites generator I found, that handles CSS replacement well enough.

usage

    grunt.initConfig({
    	'sprite-preprocessor': {
    		options: {
				// generated img name, defaults to 'sprite.png'
				// maps to https://github.com/madebysource/sprites-preprocessor#name
				spriteFileName: 'sprite.png',

				// where all the images for the src CSS files live, defaults to 'src/assets'
				// maps to https://github.com/madebysource/sprites-preprocessor#path
				srcImagesDir: 'src/assets',

				// a mutual prefix to all the urls in the CSS content
				// maps to https://github.com/madebysource/sprites-preprocessor#prefix
				cssUrlsPrefixedWith: 'assets/',

				// destination directory of the sprite, if 'spriteDestDir' is not specified it defaults to the value of 'srcImagesDir'
				spriteDestDir: 'dist/assets'

				// few general grunt task options

				separator: '', // in case you have more than 1 src css file,
				filter: 'isFile' // or a function
				// see http://gruntjs.com/configuring-tasks#files
            },
    		files: {
    			'dest/style.with.sprites.css': ['src/style.css' /* you can add more, they willl just be concatenated */]
    		}
    	}
    });

    grunt.loadNpmTasks("grunt-contrib-sprites-preprocessor");

npm install grunt-contrib-sprites-preprocessor
grunt sprites-preprocessor

requirements

whatever spritesmith requires, I had to

sudo npm install -g phantomjs

# and
export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig