gs

gulp-spriters

gulp-spriters

Showing:

Popularity

Downloads/wk

6

GitHub Stars

2

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

6

Size (min+gzip)

66.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gulp-sprites npm version build

##简介

自动拼接css文件中指定需要合并的图片,支持@2x图片。图片处理基于jimp,无需安装其他复杂的依赖。

##安装

npm install --save-dev gulp-spriters

##使用

css文件:

/* icon.css */
.icon_button2{
    display: inline-block;
    vertical-align: middle;
    width: 56px;
    height: 56px;
    /* here will be replace sprite image path, and auto set the background-position */
    background: url("./images/button.png?__sprite");
}

.icon_msg2{
    display: inline-block;
    vertical-align: middle;
    width: 56px;
    height: 56px;
    /* here will be replace sprite image path, and auto set the background-position */
    background: url("./images/msg.png?__sprite");
}

.icon_shake2{
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    /* here will be replace sprite image path, and auto set the background-position */
    background: url("./images/shake@2x.png?__sprite");
}

.icon_nearby2{
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    /* here will be replace sprite image path, and auto set the background-position */
    background: url("./images/nearby@2x.png?__sprite");
}

gulpfile.js文件:


var spriters = require('gulp-spriters');

gulp.src('src/**/*.css')
    .pipe(spriters())
    .pipe(gulp.dest('dist/style'));

拼接后的图片文件名为icon_z.pngicon_z@2x.png,自动修正background-positionbackground-size

License

gulp-spriters is licensed under the MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100