自动su centos 自动精灵

转载

daleiwang 2024-03-29 10:20:36

文章标签 自动su centos 前端操作系统 json ViewUI 文章分类 架构后端开发

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

即为：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',

这是合并之后生成的图片精灵，在一张大图显示了

自动su centos 自动精灵_前端

====================

这是生成的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就行了。