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 。

 

参考下载链接：https://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

 

多谢，田先生，一路指点迷津，得以顺利。