2017春 前端自动化(四) 图片精灵的使用
前段时间看了个,小伙伴的视频,针对里面的其中一点,"如何提升移动端性能"颇与想法
下面,小侃一下:单从图片加载上,来提升下移动端性能。
即为：2017春 前端自动化(四) 图片精灵的使用
一款APP上有很多小图标。不管这些图标，是否在一定周期内，发生变化及更新，都不妨碍我们的图片精灵替换！
通过工具“gulp.spritesmith”把这些小图标，整合到一张图片上，节省了加载速度与体积，而且，完全不需要设计师来核对像素。
一行命令，我们可以直接生成精灵图片。
继续之前的 自动化，打开gulpfile.js文件。
编写 var spritesmith = require('gulp.spritesmith'); //图片精灵
之后 在当前目录下 打开dos窗口，进行安装
输入：cnpm install gulp.spritesmith --save-dev
在等待的同时，我们开始写任务
输入：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/'));
});
// 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;
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
多谢，田先生，一路指点迷津，得以顺利。