# gulp-imerge

**Repository Path**: javey/gulp-imerge

## Basic Information

- **Project Name**: gulp-imerge
- **Description**: CSS sprite to using gulp. gulp css合图插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2015-04-28
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# gulp-imerge

css合图工具，[imerge](https://github.com/Javey/imerge)封装成的gulp插件

## Install

```
npm install gulp-imerge --save-dev
```

## Usage

[gulpfile.js](https://github.com/Javey/gulp-imerge/blob/master/test/gulpfile.js)示例

```js
var gulp = require('gulp'),
    imerge = require('gulp-imerge'),
    header = require('gulp-header');

gulp.task('default', function() {
    return gulp.src('./web/**/*.css')
        .pipe(imerge({
            spriteTo: './build/sprite',
            sourceContext: './web',
            outputContext: './build'
        }))
        .pipe(header('/*test*/'))
        .pipe(gulp.dest('./build'));
});
```

### Input

```
web
├── edit1.png
├── edit.png
├── index.html
├── index.js
├── main1.css
├── main.css
└── main.js
```

### Output

```
build
├── main1.css
├── main.css
└── sprite
    └── spirte_test.png
```

main.css

```css
/*test*/h1 {
  color: red;
  background: url("/sprite/spirte_test.png");
  background-position: 0px 0px;
}

h2 {
  background-image: url("/sprite/spirte_test.png");
  background-position: -46px 0px;
}
```