css-sprite使用详解

可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。

首先安装css-sprite，安装这里很坑，等我最后再说。

复制代码代码如下:npm install css-sprite

我是使用gulp来构建前端代码，所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。
新建一个task:

CSS Code复制内容到剪贴板

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

scss的模板使用mustache：

CSS Code复制内容到剪贴板

{{#items}}   
    ${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};