css-sprite使用详解

1. var gulp = require('gulp');    var gulpif = require('gulp-if');   
2.    gulp.task('sprites',function(){   
3.     gulp.src('img/icon/*.png')                  //这是要合并的图片的路径            .pipe(sprite({   
4.             name: 'icon',                       //定义一个名称                style: '_icon.scss',                //这是生成的样式文件   
5.             format: 'png',                      //png格式的图片                orientation: 'left-right',          //雪碧图合并的方向，也可以设置成垂直或水平   
6.             cssPath: '#{$icon-sprite-path}',    //雪碧图的路径变量                template: './sprite-tpl.mustache',  //scss生成的模板   
7.             processor: 'scss'                   //生成的样式文件的格式            }))   
8.         .pipe(gulpif('*.png', gulp.dest('img/'), gulp.dest('css/')));    });  

scss的模板使用mustache：