gulp制作css雪碧图

2017-11-08

在Web前端开发的过程中，Web页面加载是性能杀手，解决了Web页面加载的问题，前端工程的性能可以提升80%左右，所以，使用一些比较好的工具，引入一些比较先进的思想是很有必要的。这篇博客就介绍一下使用gulp来制作雪碧图。

雪碧图（sprite）是把多张图片拼到一张图中，提升性能的一种做法。把合并的图片一次性加载到内存中，需要时只渲染一部分。大大提高了页面响应速度。

准备工作

安装gulp：cnpm install gulp –save-dev
安装雪碧图需要的插件：cnpm install –save-dev gulp.spritesmith
建立package.json文件
新建gulpfile.js详情点击
要生成的图片：

gulpfile.js

var gulp=require('gulp');  
spritesmith=require('gulp.spritesmith');  
  
gulp.task('sprite',function(){  
    gulp.src('src/images/*.png')  
    .pipe(spritesmith({  
         imgName:'sprite.png',  
         cssName:'css/sprite.css',  
         padding:5,  
         algorithm:'binary-tree'  
     }))  
     .pipe(gulp.dest('dist/'))  
})

解释一下这个js，首先，我们引用了gulp和spritesmith这个插件，接着新建名为sprite的任务，我们需要合成雪碧图的文件在src的images文件夹里，“*”为通配符，表示这个文件夹里所有.png格式的文件都会被使用。然后，我们把这个任务放到通道（gulp机制）里，imgName为生成图的名称，css为对应生成的css文件，padding表示合成时两个图片的间距。在这里要说一下algorithm，他有四个可选值，分别为top-down、left-right、diagonal、alt-diagonal、binary-tree，表现形式如下：

最后，把生成的文件放到dist文件夹下，效果如下：

生成的css

.icon-0 {  
  background-image: url(../sprite.png);  
  background-position: 0px 0px;  
  width: 59px;  
  height: 60px;  
}  
.icon-1 {  
  background-image: url(../sprite.png);  
  background-position: 0px -65px;  
  width: 57px;  
  height: 55px;  
}  
.icon-2 {  
  background-image: url(../sprite.png);  
  background-position: -64px 0px;  
  width: 62px;  
  height: 54px;  
}

至此，基本的雪碧图就生成好了，当然，如果还想有更多的样式，我们可以引入模板cssTemplate或者直接写个函数

样式模板

{{#sprites}}//模板，直接在JS里面根据路径调用即可，#代表循环  
.icon-{{name}}{  
    background-image: url("{{escaped_image}}");  
    background-position: {{px.offset_x}} {{px.offset_y}};  
    width: {{px.width}};  
    height: {{px.height}};  
}  
{{/sprites}}

cssTemplate: function (data) {//函数，直接写到gulpfile.js文件即可。  
    var arr=[];  
    data.sprites.forEach(function (sprite) {  
        arr.push(".icon-"+sprite.name+  
        "{" +  
        "background-image: url('"+sprite.escaped_image+"');"+  
        "background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+  
        "width:"+sprite.px.width+";"+  
        "height:"+sprite.px.height+";"+  
        "}\n");  
    });  
    return arr.join("");  
}