gulp填坑記（二）——gulp多張圖片自動合成雪碧圖

爲優化圖片，減小請求會把拿到切好的圖標圖片，經過ps（或者其餘工具）把圖片合併到一張圖裏面，再經過css定位把對於的樣式寫出來引用的html裏面，對於一些圖片較多的項目，這個過程可能要花費咱們一天的時間，來實現這步。今天這一步縮短到幾秒鐘就能完成，到底是什麼工具這麼神奇呢，他就是gulp的一個插件gulp.spritesmith。下面一張圖來講明他能作什麼。

                                                                                                        

第一步：npm install --save-dev gulp.spritesmith 安裝 gulp.spritesmith

第二部：配置gulpfile.js

//引入gulp模塊
const gulp=require('gulp');

//引入雪碧圖合成插件
const spritesmith=require('gulp.spritesmith');
gulp.task('spritesmith',function(){
	gulp.src('src/images/*.png')
		.pipe(spritesmith({
			imgName:'sprite.png',//保存合併後的名稱
			cssName:'dest/css/sprite.css',//保存合併後css樣式的地址
			padding:15,//合併時兩個圖片的間距
			algorithm:'binary-tree',//註釋1
			//cssTemplate:'dest/css/handlebarsStr.css'//註釋2
			cssTemplate:function(data){             //若是是函數的話，這能夠這樣寫
			   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("");
			}
		}))
		.pipe(gulp.dest('dest/images'));
})

　　

註釋一：

Algorithm 有四個可選值分別爲top-down、left-right、diagonal、alt-diagonal、binary-tree

對於以下：

　　

註釋二：

cssTemplate 是生成css的模板文件能夠是字符串也能夠是函數。是字符串是對於相對於的模板地址 對於模板文件樣式格式是：

{{#sprites}}
.icon-{{name}}{
    background-image: url("{{escaped_image}}");
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};
}
{{/sprites}}

　　須要要合成的圖片：

　　

　　合成成功：