fis3 精灵图制作

为什么要使用精灵图?
为了合并http请求,提高网页性能。
我们都知道,每个图片的加载都需要发送一次http请求,一般采取的方式是将多个图片合并为一张图片,再通过css定位来显示所需图片,采用fis-spriter-csssprites插件可以自动构建定位代码,使开发变得更加方便。

在fis中制作精灵图分成三步
1 找到需要制作精灵的图片。在图片路径后面加上?__sprite
2 找到需要处理的css文件,配置useSprite属性值true
3 在打包阶段,引入制作精灵图的插件
该阶段是::package
引入插件 fis-spriter-csssprites
阶段 spriter
名称 csssprites

项目目录如下:
|__demo
  |__css
     |__index.css
  |__ img
  |__index.html
  |__fis-conf.js

index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="./css/index.css">
head>
<body>
 <ul>
     <li>
         <span class="item-1">span>
         <p>机票p>
     li>
     <li>
         <span class="item-2">span>
         <p>酒店p>
     li>
     <li>
         <span class="item-3">span>
         <p>数娱p>
     li>
 ul>
body>
html>

index.css

*{
    margin: 0;
    padding:0;
    list-style: none;
}

ul{
    width: 200px;
    height: 80px;
    margin: 100px auto;
}

ul li{
    width: 60px;
    height: 55px;
    padding-top: 5px;
    float: left;
    border: 3px solid silver;
    text-align: center;
}

ul li:hover{
    opacity: 0.5;
}

ul li span{
    width: 40px;
    height: 30px;
    display: inline-block;
    background-repeat: no-repeat;
}

ul li p{
    font-size: 12px;
}

/* 第一步  在图片路径后面添加?__sprite */
/* 开发是只需要直接引入图片即可,不需要设置background-position属性,是不是很方便*/
.item-1{
    background-image: url("../images/index_homeh.png?__sprite");
}
.item-2{
    background-image: url("../images/index_img1h.png?__sprite");
}
.item-3{
    background-image: url("../images/index_img2h.png?__sprite");
}

fis-conf.js

// 第二步 找到所有css文件
fis.match('**.css',
    {
        useSprite:true
    }
)

// 第三步 打包阶段使用精灵图插件
fis.match('::package', {
    spriter: 'csssprites'})

使用fis发布命令进行发布:fis3 release -d ../demorelease

可以在demorelease目录下发现发布的代码
同时看到demorelease/css目录下生成了一个index_z.png的图片,包含刚才我们引入的三张小图片。

demorelease/css/index.css代码中的图片引入样式也变为如下代码

/* 第一步  在图片路径后面添加?__sprite */
.item-1{background-repeat: no-repeat;}
.item-2{background-repeat: no-repeat;}
.item-3{background-repeat: no-repeat;}

/* 此处自动设置background-position属性,自动引入制作好的精灵图*/
.item-1{background-position:0px 0px}
.item-2{background-position:0px -38px}
.item-3{background-position:-2px -73px}
.item-1,.item-2,.item-3{background-image: url(/css/index_z.png)}

你可能感兴趣的:(fis)