首页 > 代码库 > 2017春 前端自动化(四) 图片精灵的使用

2017春 前端自动化(四) 图片精灵的使用

前段时间看了个,小伙伴的视频,针对里面的其中一点,"如何提升移动端性能"颇与想法
下面,小侃一下:单从图片加载上,来提升下移动端性能。

 

即为:2017春 前端自动化(四)   图片精灵的使用

一款APP上有很多小图标。不管这些图标,是否在一定周期内,发生变化及更新,都不妨碍我们的图片精灵替换!
通过工具“gulp.spritesmith”把这些小图标,整合到一张图片上,节省了加载速度与体积,而且,完全不需要设计师来核对像素。
一行命令,我们可以直接生成精灵图片。

继续之前的 自动化,打开gulpfile.js文件。
编写  var spritesmith = require(‘gulp.spritesmith‘);  //图片精灵
 
之后 在当前目录下 打开dos窗口,进行安装
输入:cnpm install gulp.spritesmith  --save-dev 
在等待的同时,我们开始写任务
 
// 自动雪碧图
// autoSprite, with media query
gulp.task(‘autoSprite‘, function () {
  var spriteData = gulp.src(‘./dev/static/images/def/bankLogo/*.png‘).pipe(spritesmith({
    imgName: ‘sprite.png‘,
    cssName: ‘sprite.css‘,
    padding: 20 
  }));
  return spriteData.pipe(gulp.dest(‘./dev/static/images/out/spriteImages/‘));
});
 
保存,执行 “gulp”.并且新打开一个dos窗口,执行 “gulp autoSprite”

则可生成全新的 文件
‘sprite.png‘,
‘sprite.css‘,
 
这是合并之后生成的  图片精灵,在一张大图显示了
 
技术分享

 

====================
这是生成的sprite.css代码片段

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.spicon {
  display: inline-block;
}

.icon-abc {
  background-image: url(sprite.png);
  background-position: -62px 0px;
  width: 42px;
  height: 42px;
}
 
通过这样,我们可以直接在页面,调用,需要谁,就添加谁的class熟悉,工具已经为我们起好名字,不用担心命名冲突,不用担心对不齐。
自此,有了一个对齐的标杆了!
=================================
PS同步之前的三讲
拿到一个新的项目,拷贝(src文件夹 gulpfile.js, package.json。这3个即可)到编辑器
打开当前dos窗口,以此执行
cnpm install gulp --save-dev
cnpm install
======================
这分为二种情况:
第一种情况是:在同一个电脑上复制到任意一个目录里面。只需要cnpm install这个就行了。
第二种情况是:如果是复制到其他电脑上就得需要先安装node.js、cnpm之类的东西。 上面都安装完了之后就cnpm install就行了 。


至此,不管你有多少张,小图标;不管你什么时候,更新图标,我只要按照我的配置表,执行 dos窗口下的命令。则瞬间可以秒杀 生成 所需要的  图片精灵 及对应的样式表,更无需去请求设计师的帮忙了。

so easy 。
 
参考下载链接:http://files.cnblogs.com/files/leshao/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96%E7%AC%AC%E5%9B%9B%E8%AE%B2%28%E5%9B%BE%E7%89%87%E7%B2%BE%E7%81%B5%29.rar
 
多谢,田先生,一路指点迷津,得以顺利。
 

 

2017春 前端自动化(四) 图片精灵的使用