css sprites

1.png

2.CSS Sprite(CSS 精靈), 也稱作 雪碧圖谬晕；如華為官網(wǎng)右側(cè)提示欄：

2.png

圖標(biāo)字體是個(gè)比較大的技術(shù)討論點(diǎn)， 關(guān)于它可以出好幾篇博文凑耻，可惜本文主角不是它， 今天主要探討下 CSS Sprite -- 雪碧圖 的各種實(shí)現(xiàn)柠贤。

CSS 雪碧圖簡(jiǎn)介

開始說雪碧圖各種實(shí)現(xiàn)前香浩， 簡(jiǎn)單說下什么是雪碧圖？雪碧圖的原理是什么臼勉？
什么是雪碧圖邻吭？

雪碧圖也叫CSS精靈， 是一CSS圖像合成技術(shù)宴霸；

上面解釋說它是一項(xiàng)技術(shù)囱晴，但我們開發(fā)人員往往將小圖標(biāo) 合并在一起之后的圖片稱作雪碧圖；術(shù)語定義其實(shí)不用糾結(jié)瓢谢， 我們知道它主要用在小圖標(biāo)顯示上就行了畸写。

CSS 雪碧圖應(yīng)用原理：

只有一張大的合并圖， 每個(gè)小圖標(biāo)節(jié)點(diǎn)如何顯示單獨(dú)的小圖標(biāo)呢氓扛？
其實(shí)就是 截取 大圖一部分顯示枯芬，而這部分就是一個(gè)小圖標(biāo)，如下圖：

3.png

如顯示上面 QQ 小圖標(biāo)采郎， 則在合并圖中X軸向右60像素千所， Y軸0像素， 截取寬高均為48像素蒜埋；則 這個(gè)小圖標(biāo)就出來了：

4.png

關(guān)鍵樣式：

background-image: url("sprite.png");
background-position: -60px 0px;
width:48px;
height:48px;

接下來淫痰， 就開始進(jìn)入實(shí)踐環(huán)節(jié)， 如果我們要實(shí)現(xiàn)如下效果整份， 該怎么做呢待错？

5_1.png

5.png

按正常開發(fā)流程， 我們的設(shè)計(jì)部同事會(huì)給我們這樣的一個(gè)設(shè)計(jì)稿（實(shí)際設(shè)計(jì)稿會(huì)有更多無關(guān)圖層）：

6.png

7.png

2.選中要導(dǎo)出的圖標(biāo)（建議快鍵鍵z用縮放工具放大然后選切圖區(qū)）：

8.png

9.png

3.導(dǎo)出為web格式圖片快捷鍵：Alt+Shift+Ctrl+S(mac: Alt+Shift+Commond+S)

10

11.png

需要說下的， 新版本 photoshop 從2015 CC開始就不用這么麻煩去切圖了础倍， 直接選中小圖標(biāo)圖層右鍵“快速導(dǎo)出為PNG”烛占， 即可得到對(duì)應(yīng)小圖標(biāo)的png文件；

12.png

Photoshop軟件版本不夠新怎么辦？ 你可以看看 21款強(qiáng)大高效的Photoshop擴(kuò)展插件
第10個(gè)Breezy 即為切圖插件忆家；快速導(dǎo)出 或 切圖 成功后犹菇， 就有了以下四個(gè)小圖標(biāo)了：

13.png

傳統(tǒng)網(wǎng)頁調(diào)用小圖標(biāo)（原始方式）

首先說下雪碧圖技術(shù)沒推廣開來 或 新手小白開發(fā)以上效果時(shí)揭芍， 是這樣實(shí)現(xiàn)的：demo地址：
小圖標(biāo)調(diào)用Demo(原始版)
代碼地址：
小圖標(biāo)調(diào)用源碼(原始版)
分別為四個(gè)小圖標(biāo)定義不同的四張小圖標(biāo)， 關(guān)鍵樣式代碼：

.ps_demo_wrap .demo_icon{
    position: relative;
    float:left;
    margin:13px 0px 0px 10px;
    cursor: pointer;
    width:54px;
    height:54px;
}
.ps_demo_wrap .weibo_icon{ background-image:url("../scss/images/icon_weibo.png"); }
.ps_demo_wrap .qq_icon{ background-image:url("../scss/images/icon_qq.png"); }
.ps_demo_wrap .douban_icon{ background-image:url("../scss/images/icon_douban.png"); }
.ps_demo_wrap .renren_icon{ background-image:url("../scss/images/icon_renren.png"); }

不使用雪碧圖卸例， 單純調(diào)用小圖片有以下優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：調(diào)用簡(jiǎn)單称杨、維護(hù)方便； 缺點(diǎn)：請(qǐng)求文件過多筷转、引發(fā)性能問題姑原；
為什么不建議使用該方式顯示小圖標(biāo)？
每個(gè)小圖標(biāo)都單獨(dú)調(diào)用一圖片呜舒， 即意味著每個(gè)小圖標(biāo)的顯示都產(chǎn)生一個(gè)HTTP請(qǐng)求锭汛；學(xué)習(xí)過HTTP相關(guān)知識(shí)應(yīng)該知道，一般情況下每次創(chuàng)建一 HTTP請(qǐng)求袭蝗，請(qǐng)求到的內(nèi)容 往往是次要的（除非文件特別大）唤殴， 性能開銷主要在請(qǐng)求、以及響應(yīng)階段到腥；使用以上方式實(shí)現(xiàn)如 斗魚直播間雪碧圖或以下知乎的雪碧圖朵逝， 造成的性能消耗肯定不小乡范！

14.png

雪碧圖實(shí)現(xiàn)1： CSS Gaga

15.jpg

16.png

.ps_demo_wrap .weibo_icon,
.ps_demo_wrap .qq_icon,
.ps_demo_wrap .douban_icon,
.ps_demo_wrap .renren_icon{
  width:54px;
  height:54px;
  background:url("../images/CssGaga.png");
}
.ps_demo_wrap .weibo_icon{ background-position: -168px 0px; }
.ps_demo_wrap .qq_icon{ background-position: -56px 0px; }
.ps_demo_wrap .douban_icon{ background-position: 0px 0px; }
.ps_demo_wrap .renren_icon{ background-position: -112px 0px; }

demo地址：
雪碧圖實(shí)現(xiàn)1Demo
代碼地址：
雪碧圖實(shí)現(xiàn)1源碼

實(shí)現(xiàn)方案1問題比較多：

1.只支持windows操作系統(tǒng)威鹿， 對(duì)于很多mac開發(fā)的人而言不友好剃斧；

2.多人維護(hù)雪碧圖時(shí)，溝通成本較高(得確認(rèn)新的雪碧圖中舊小圖標(biāo)位置是否有變化)忽你；

接下來分析的實(shí)現(xiàn)方案2普及率比較高幼东， 應(yīng)該是目前大部分前端組的實(shí)現(xiàn)方式；

雪碧圖實(shí)現(xiàn)2：photoShop

雖然我們不是設(shè)計(jì)人員科雳，但作為傳統(tǒng)web開發(fā)人員photoShop幾乎是必學(xué)技能根蟹； 當(dāng)然隨著前端技術(shù)的不斷發(fā)展， 前端開發(fā)人員使用photoShop的幾率會(huì)越來越少糟秘；
回歸正題娜亿， 雪碧圖的實(shí)現(xiàn)方案2就是使用photoShop來生成雪碧圖， 并且雪碧圖以PSD文件格式保留蚌堵， 后續(xù)修改圖標(biāo)（或新增圖標(biāo)）只需要找到并修改該P(yáng)SD即可， 再也不用保存原來的小圖標(biāo)了~
實(shí)現(xiàn)步驟：
1.下載（mac 版沛婴、windows版）PS軟件吼畏；

17.png

18.png

19.png

20.png

21.png

5.根據(jù)參考線確定小圖標(biāo)位置丑婿；

22.png

23.png

24.png

6.使用裁剪工具裁剪后性雄，PSD導(dǎo)出為png, 快捷鍵： Alt+Shift+Ctrl+S(mac: Alt+Shift+Commond+S)；

25.png

26.png

27.png

實(shí)現(xiàn)方案2問題：

1.操作PSD步驟有點(diǎn)多， 需要開發(fā)人員熟悉PS操作筒占；

2.PSD文件比較大贪庙， 也不太適合保存在項(xiàng)目中， 一般放SVN共享維護(hù)翰苫；（SVN服務(wù)器宕機(jī)止邮、PSD文件沖突等也需要不少時(shí)間成本）

好了，接下來分析的是實(shí)現(xiàn)方式3， 使用自動(dòng)化部署工具gulp生成雪碧圖农尖，也是本文推薦的雪碧圖實(shí)現(xiàn)方式析恋！

雪碧圖實(shí)現(xiàn)3：gulp

如果讀者從未聽說gulp或者對(duì)gulp了解的比較少， 建議網(wǎng)上搜索并閱讀gulp相關(guān)資料后繼續(xù)觀看以下內(nèi)容盛卡！

28.jpg

實(shí)現(xiàn)步驟：

1.安裝 gulp 開發(fā)雪碧圖的依賴模塊滑沧，具體要哪些模塊可參考本demo的配置文件并村；
PS: 為什么不直接參考本demo的package.json文件？因?yàn)楸綿emo所在工程引用的其他nodejs模塊較多容易造成干擾滓技。

2.編寫配置文件哩牍， 以下是關(guān)鍵配置代碼：

/*
* 雪碧圖合并task( 輸出到 css文件 )
* 參數(shù)1：執(zhí)行目錄；
* 參數(shù)2：生成的sass和圖片的文件名令漂；
* example：gulp sprite-css --scss --index_css_gulp
*/
gulp.task('sprite-css', function(){
  var DEST_NAME = args[1];
  return  gulp.src(`${WATCH_SRC}/**/*.png`)
              .pipe(spritesmith({
                  imgName: DEST_NAME + '.png',
                  cssName: DEST_NAME + '.css',
                  imgPath: '../images/' + DEST_NAME + '.png'
              }))
              .pipe(gulpif('*.png', gulp.dest('images/')))
              .pipe(gulpif('*.css', gulp.dest('css/')));
});

之所以推薦gulp膝昆， 是因?yàn)間ulp非常的靈活， 看懂gulp模塊的API可以根據(jù)你的項(xiàng)目情況編寫對(duì)應(yīng)的配置文件叠必。所以以上配置文件只是一個(gè)參考荚孵， 實(shí)現(xiàn)的功能幾乎不可能遷移到其他項(xiàng)目。

3.編寫好配置文件后纬朝， cmd(windows)或終端(mac)到配置文件同級(jí)目錄（gulpfile.js收叶， gulp規(guī)定配置文件名字必須為gulpfile）然后執(zhí)行指令：

gulp sprite-css --scss --index_css_gulp

就會(huì)在指定路徑生成index_css_gulp.css 以及 index_css_gulp.png, 一般是拷貝index_css_gulp.css樣式后再刪除該css文件， 本demo功能比較簡(jiǎn)單共苛， 所以直接在index_css_gulp.css添加新樣式判没；
demo地址：
雪碧圖實(shí)現(xiàn)3_1Demo
代碼地址：
雪碧圖實(shí)現(xiàn)3_1源碼

gulp 生成 sass 代碼（推薦）

比起上述用gulp生成css代碼， 本人更推薦使用gulp生成sass代碼隅茎，因?yàn)槟阋呀?jīng)安裝了gulp了那順便安裝下gulp-sass很簡(jiǎn)單澄峰。越是大型的項(xiàng)目， sass 的優(yōu)勢(shì)越明顯辟犀， 當(dāng)然小項(xiàng)目用它也不差摊阀。（sass可以明顯提高編寫樣式的效率）

29.jpg

實(shí)現(xiàn)步驟：

1、2踪蹬、3步驟同上胞此， 只是第三步驟指定的指令為：

gulp sprite --scss --mySprite

關(guān)鍵配置代碼：

/*
* 雪碧圖合并task( 輸出到 scss文件)
* 參數(shù)1：執(zhí)行目錄；
* 參數(shù)2：生成的sass和圖片的文件名跃捣；
* 參數(shù)3：輸出目錄（非必填）漱牵，不填的話輸出目錄為執(zhí)行目錄
* example：gulp sprite --scss --mySprite
*/
gulp.task('sprite', function(){
    var DEST_SRC = args[2] !== undefined ? args[2] : args[0];
    var DEST_NAME = args[1];
    var spriteData = gulp.src(`${WATCH_SRC}/**/*.png`).pipe(spritesmith({
        imgName: DEST_NAME + '.png',
        imgPath: '../images/' + DEST_NAME + '.png',
        cssName: '_' + DEST_NAME + '.scss'
    }));

    var imgStream = spriteData.img
        .pipe(buffer())
        .pipe($.imagemin())
        .pipe(gulp.dest('images'));

    var cssStream = spriteData.css
        .pipe(gulp.dest(`${DEST_SRC}`));

    return merge(imgStream, cssStream);
});

執(zhí)行完指令后會(huì)在對(duì)應(yīng)目錄生成_mySprite.scss 、mySprite.png, 根據(jù)sass語法帶“_”前綴的文件為調(diào)用模塊疚漆， 只能被其他sass文件調(diào)用不會(huì)被編譯成同名css文件酣胀；生成的_mySprite.scss文件手動(dòng)添加到目標(biāo)樣式index.scss中調(diào)用刁赦， 然后通過監(jiān)聽（配置文件的sass:watch）自動(dòng)生成index.css文件，配置文件可以在執(zhí)行指令的時(shí)候指定路徑闻镶，所以能適應(yīng)更多的場(chǎng)景甚脉。
demo地址：
雪碧圖實(shí)現(xiàn)3_2Demo
代碼地址：
雪碧圖實(shí)現(xiàn)3_2源碼

實(shí)現(xiàn)方案3問題：

1.gulp 相關(guān)知識(shí)得熟悉才能寫出對(duì)應(yīng)的配置文件；

2.如使用gulp生成scss文件還得學(xué)習(xí)sass相關(guān)資料铆农；

PS: gulp 跟 sass 都是大部分前端組要求掌握的技能牺氨；

雪碧圖實(shí)現(xiàn)4：webpack

說到webpack很多人會(huì)聯(lián)想到ReactJs， 的確前段時(shí)間 ReactJs 的大熱讓更多的人知道了webpack墩剖， 但webpack并不是ReactJs內(nèi)置的模塊猴凹， 它是德國人開發(fā)出來的模塊加載工具。因?yàn)楹芎糜盟员籖eactJs作為推薦加載工具岭皂， webpack可以跟其他庫一起完成項(xiàng)目郊霎，本demo單獨(dú)使用webpack完成。

30.png

實(shí)現(xiàn)步驟：

1.配置webpack開發(fā)環(huán)境（其實(shí)也是安裝nodejs環(huán)境+cnpm安裝對(duì)應(yīng)模塊而已）爷绘；

2.安裝雪碧圖依賴模塊：webpack-spritesmith;

3.將素材小圖標(biāo)放入對(duì)應(yīng)文件夾书劝，編寫配置文件-webpack.config.js：

var path = require('path');
var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    plugins: [
        new SpritesmithPlugin({
          src: {
            cwd: path.resolve(__dirname, 'app/images/'),
            glob: '*.png'
          },
          target: {
            image: path.resolve(__dirname, 'build/images/sprite.png'),
            css: path.resolve(__dirname, 'build/css/sprite.css')
          },
          apiOptions: {
            cssImageRef: '../images/sprite.png'
          },
          spritesmithOptions: {
            algorithm: 'top-down'
          }
        })
    ]
};

4.在配置文件同級(jí)目錄下，執(zhí)行指令：

webpack

同實(shí)現(xiàn)3_1在生成的sprite.css手動(dòng)添加樣式demo就完成了土至！該實(shí)現(xiàn)方式類似gulp购对， 都使用“ spritesmith”模塊，都寫配置文件+執(zhí)行指令生成雪碧圖毙籽，當(dāng)然webpack方式也可以生成scss文件， 限于本文篇幅就不做介紹了（其實(shí)是還不會(huì)[一臉懵逼撓頭])毡庆。

demo地址：
雪碧圖實(shí)現(xiàn)4Demo
代碼地址：
雪碧圖實(shí)現(xiàn)4源碼

實(shí)現(xiàn)方案4問題：

1.需要學(xué)習(xí)webpack相關(guān)知識(shí)坑赡；（現(xiàn)在webpack官網(wǎng)教程完善些了，不像早些時(shí)候官網(wǎng)教程外鏈到別人博客么抗，評(píng)論區(qū)里各種吐槽表情包~~~）

2.webpack是一套完整的模塊引用工具毅否，不止樣式， 其他功能不一定用的上蝇刀。

結(jié)語：

除了 gulp 跟 webpack 外螟加，還有國產(chǎn)前端部署的解決方案FIS3, 其對(duì)小圖標(biāo)也有一套部署配置流程， 因?yàn)椴涣私饩筒粚懥耍?感興趣的同學(xué)可以去學(xué)習(xí)下吞琐；webpack跟FIS3包含的其他功能多一些（特別是FIS3可稱為完整的解決方案）捆探，一般項(xiàng)目如果大方向的技術(shù)選型沒定webpack或FIS3,就單純完成雪碧圖而言不太推薦；
最后說明下站粟， 上述的demo實(shí)現(xiàn)是有瀏覽器兼容問題的黍图， IE8(包括IE8)以下版本不支持圓角和rgba單位值：
border-radius:50%;background-color: rgba(0,0,0,.5);
rgba顏色方面倒是可以使用透明+濾鏡（低版本瀏覽器）實(shí)現(xiàn)， 圓角就只有新增圖標(biāo)了奴烙， 當(dāng)然以上只是demo不用在意其他細(xì)節(jié)了哈~

參考資料：

CSS Sprite實(shí)踐應(yīng)用-慕課網(wǎng)
Photoshop實(shí)踐分享PPT
HTTP協(xié)議詳解
21款強(qiáng)大高效的Photoshop擴(kuò)展插件
CssGaga 幫助索引
前端構(gòu)建工具gulp的使用
十分鐘學(xué)會(huì)sass
webpack中文指南