gulp将多张小图自动合成雪碧图 - 沪

发布时间:2017-7-9 7:15:23编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"gulp将多张小图自动合成雪碧图 - 沪",主要涉及到gulp将多张小图自动合成雪碧图 - 沪方面的内容,对于gulp将多张小图自动合成雪碧图 - 沪感兴趣的同学可以参考一下。

gulp将多张小图自动合成雪碧图

最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以。因为之前的项目开发时间过短,也没有时间去慢慢实现雪碧图,所以就一直没有做这样的一个功能,但这次时间较为充分,于是就开始着手做雪碧图。做之前呢,首先想到的就是用PS将所有的小图放在一张大图上,可那么多的小图,一张一张往上放,岂不累趴,而且你还没有办法去确切的计算整张雪碧图的宽高,这不搞死人吗?于是就上网查资料,然后就有了本文很简单的生成雪碧图的方法。

这种方法是基于gulp的,因为之前就会玩gulp,所以安装gulp及相关的插件就很简单了(具体玩转gulp请去我的博客中关于学习安装并配置前端自动化工具Gulp的文章)。可能有人用的是webpack这种高大上的技术,但我还不会用这玩意,就暂且用gulp吧,能实现我想要的就是最好的。以下就是详细的实现代码:

配置gulpfile.js

//引入gulp模块var gulp=require('gulp'); //引入雪碧图合成插件var spritesmith=require('gulp.spritesmith');gulp.task('default',function(){    gulp.src('images/*.png')        .pipe(spritesmith({            imgName:'images/sprite.png',    //保存合并后的名称            cssName:'css/sprite.css',       //保存合并后css样式的地址            padding:2,                      //合并时两个图片的间距            algorithm:'binary-tree',        //注释1            //cssTemplate:'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-repeat: no-repeat;"+                            "background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"+                            "background-size: "+sprite.px.width+" "+sprite.px.height+";"+                            "width: "+sprite.px.width+";"+                                                    "height: "+sprite.px.height+";"+                        "}\n");                });                return arr.join("");            }        }))        .pipe(gulp.dest('dest/'));   //输出目录});

关于代码中的注释部分作出以下详解:

注释1:

Algorithm 有四个可选值分别为:top-down、left-right、diagonal、alt-diagonal、binary-tree

对应如下:

注释2:

cssTemplate是生成css的模板文件,可以是字符串也可以是函数。是字符串是对于相对于的模板地址,对于模板文件样式格式是:

配置handlebarsStr.css

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

个人认为,还是这种方法比较简单实现。

需要要合成的图片:

合成成功:

本文部分内容出自:
http://www.cnblogs.com/yanxinhua/p/6816141.html


上一篇:sqlserver使用存储过程跟踪SQL
下一篇:4.29训练题解

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款