如果你正在使用 tmt-workflow，那么當(dāng)你運(yùn)行 gulp build_dist 的時(shí)候，slice 的目錄下的圖片將會(huì)根據(jù) CSS 的使用自動(dòng)合并 。

使用介紹

當(dāng)一張圖片 icon-twitter.png 需要合并的時(shí)候，請(qǐng)放入 slice 目錄中，然后在 style-index.css 中這么寫(xiě)：

.icon-word {    background-image: url('../slice/icon-twitter.png');
}

合并后：

.icon-word {    background-image: url('../sprite/style-index.png');    
background-position: 20px 20px;
}

如果圖片支持 @2x，可以命名為 icon-twitter@2x.png 一起放入 slice 目錄中，合并后會(huì)加入 media query：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (min-resolution: 240dpi) {

    .icon-word{        background-image:url("../sprite/style-index@2x.png");        
    background-position: -4px -4px;        
    background-size:132px;
    }

}

依此類推，如果為 3 倍圖，則命名為：icon-twitter@3x.png 即可。目前只支持到 3 倍圖。

注意點(diǎn)

1. 圖片一定是放在 slice 目錄下才會(huì)被合并
2. 使用的時(shí)候一定是 background-image 屬性才會(huì)被識(shí)別匹配
3. @2x 圖保持偶數(shù)高寬。（懶癌犯了，病治好后讓插件自動(dòng)給奇數(shù)@2x圖加透明白邊也是可以的）