Gulp-ysprite NPM

gulp-ysprite

gulp插件gulp-ysprite，特点如下：

合并样式中的含有slice的背景图片
生成sprite文件夹，包含合并后的sprite图片
自动更新原CSS文件中的样式
适用制作普通PC和H5使用，包含生成二倍图和对应样式

安装

npm install --save-dev gulp-ysprite

参数

slice：存放需要合并图片的slice路径

sprite：生成sprite文件的路径

callback(stream)：回调函数，返回stream流

使用

var gulp = require('gulp');
var ySprite = require('gulp-ysprite');

gulp.src('test/*.css').pipe(ySprite({
    slice: 'test/slice',
    sprite: 'test/sprite',
    callback: function(stream){
        stream.pipe(gulp.dest('test/output'));
    }
}));

注意

需要合并的图片书写样式背景时必须是background-image的形式
slice文件夹下可以再建立子文件夹，层级深度无限制，子文件夹内的图片会单独生成一个sprite文件
生成的sprite命名规范：slice根目录下的图片命名为index.png，层级深度为1的子文件夹直接按文件夹名字命名，层级大于1的文件夹命名采用“子文件夹1_子文件夹2”的命名方式，比如 slice/test/icons，生成 test_icons.png
针对H5有点不一样，需要首先在slice文件夹下建立一个2x文件夹，表示要生成的是二倍图，然后再在2x文件夹下放置图片，也可以放置子文件夹，和上面使用一样，但命名区别是生成的文件会带上@2x的命名规范，例如：slice/2x/test/icons文件夹下的图片会生成 test/icons@2x.png
此外，原样式文件中的background-image值会被替换，插件会自动添加计算后的background-position值，如果是2x文件夹下的图片，生成的样式文件中会自动生成background-size覆盖原先的值