imerge

css

• background-repeat``background-size``left/right/top/bottom``center%background-position
• padding
• ie6 hack"_"

• png

npm install -g imerge

cssmerge: value``value``merge

div {
	background: url('path/to/image.png');
	imerge: sprite;
}

imerge source dest [options]

cssdest

css

div {
	background: url('path/to/sprite_sprite.png');
	background-position: 0px 0px;
}

sprite_sprite.png

sprite_sprite.pngie6 hacksprite_sprite_ie6.png

• png/git/jpg
• background-position: center 40%
• background-repeat: repeat-x,background: repeat-y

imerge source dest -a

Options:

    -h, --help                     output usage information
    -V, --version                  output the version number
    -p, --pattern [pattern]        CSS file glob pattern
    -d, --default-padding [value]  Set default padding value
    -a, --all                      Process all background images
    -w, --webroot [path]           Set webroot path. Default: source path. Deprecated, use --source-context.
    -c, --css-to [path]            CSS output path. The priority is higher than dest
    -s, --sprite-to [path]         Sprite image output path. The priority is higher than dest
    -e, --source-context [path]    Source file webroot
    -t, --output-context [path]    Output file webroot

imergenode module

var IMerge = require('IMerge');

var iMerge = new IMerge.IMerge(options, pathFilter);
iMerge.start();

options

{
	// css
	from: '',
	// csssprite image
	to: '',
	// cssto
	cssTo: '',
	// sprite imageto
	spriteTo: '',
	// cssimage
	sourceContext: '',
	// cssimage
	outputContext: '',
	// glob pattern
	pattern: '/**/*.css',
	defaults: {
		// spritecss
		padding: null
	},
	options: {
		// background background-imagemerge
		all: false
	}
}

pathFilter

{
	// 
	imagePathFilter: function(file, conf) {
		return file;
	},
	// sprite
	spriteTo: function(merge) {
		return path.join(opt.spriteTo, '/spirte_' + merge + '.png');
	},
	// spritecss
	spritePathFilter: function(file) {
		return file.replace(opt.outputContext, '').replace(/\\/g, '/');
	},
	// css
	cssTo: function(file) {
		return path.join(opt.cssTo, path.relative(opt.from, file));
	}
}

1. stylusmerge

cssimerge

div {
  background: url('path/to/image.png');
  imerge: sprite;
}

imerge

A tool for css sprite.

#Features

• Highly performance
• Support background-repeat, background-size and even background-position which value is left, right, top and bottom except for center
• Custom image padding in sprite
• Custom merge setting
• Support ie6 hack, i.e. declaration starts with '_'

##Plan

• Multi image formats are supported.Only support png for now.
• Auto generate sprite image when you don't customize merge setting, e.g. conflict detect.

#Install

npm install -g imerge

#Usage

Before using this tool, you must to customize merge setting in css files. Just add merge: value in css block which has background or background-image declaration.

For example:

div {
	background: url('path/to/image.png');
	merge: sprite;
}

then execute

imerge source dest [options]

This will generate css files and sprite images to dest directory.

##Output CSS file:

div {
	background: url('path/to/sprite_sprite.png');
	background-position: 0px 0px;
}

Sprite image is named sprite_sprite.png.

#Options

Options:

    -h, --help                     output usage information
    -V, --version                  output the version number
    -p, --pattern [pattern]        CSS file glob pattern
    -d, --default-padding [value]  Set default padding value
    -a, --all                      Process all background images
    -w, --webroot [path]           Set webroot path. Default: source path. Deprecated, use --source-context.
    -c, --css-to [path]            CSS output path. The priority is higher than dest
    -s, --sprite-to [path]         Sprite image output path. The priority is higher than dest
    -e, --source-context [path]    Source file webroot
    -t, --output-context [path]    Output file webroot

#Test

Use mocha as the unit test framwork.

npm install -g mocha
// enter project directory
mocha -w --compilers coffee:coffee-script --recursive