摘要：編寫配置文件，以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦，是因?yàn)榉浅５撵`活，看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫對(duì)應(yīng)的配置文件。

網(wǎng)站開(kāi)發(fā)90%會(huì)用到小圖標(biāo)， 多小圖標(biāo)調(diào)用顯示是前端開(kāi)發(fā)常見(jiàn)的問(wèn)題；目前小圖標(biāo)顯示常見(jiàn)有兩種方式（其他方式歡迎補(bǔ)充）：
1.圖標(biāo)字體 顯示；如小米官網(wǎng)左側(cè)菜單欄：

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

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

開(kāi)始說(shuō)雪碧圖各種實(shí)現(xiàn)前， 簡(jiǎn)單說(shuō)下什么是雪碧圖？雪碧圖的原理是什么？
什么是雪碧圖？

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

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

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

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

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

關(guān)鍵樣式：

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

接下來(lái)， 就開(kāi)始進(jìn)入實(shí)踐環(huán)節(jié)， 如果我們要實(shí)現(xiàn)如下效果， 該怎么做呢？

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

然后就是前端作為切圖仔表現(xiàn)的時(shí)候了， 簡(jiǎn)單說(shuō)下切圖步驟（高級(jí)切圖仔請(qǐng)?zhí)^(guò)）：
1.裁剪工具（快捷鍵C）， 選中 切片工具：

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

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

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

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

小圖標(biāo)素材整理好后， 接下里就是針對(duì)上述頁(yè)面效果的各種實(shí)現(xiàn)以及對(duì)比了。

首先說(shuō)下雪碧圖技術(shù)沒(méi)推廣開(kāi)來(lái) 或 新手小白開(kāi)發(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)求文件過(guò)多、引發(fā)性能問(wèn)題；
為什么不建議使用該方式顯示小圖標(biāo)？
每個(gè)小圖標(biāo)都多帶帶調(diào)用一圖片， 即意味著每個(gè)小圖標(biāo)的顯示都產(chǎn)生一個(gè)HTTP請(qǐng)求；學(xué)習(xí)過(guò)HTTP相關(guān)知識(shí)應(yīng)該知道，一般情況下每次創(chuàng)建一 HTTP請(qǐng)求，請(qǐng)求到的內(nèi)容 往往是次要的（除非文件特別大）， 性能開(kāi)銷主要在請(qǐng)求、以及響應(yīng)階段；使用以上方式實(shí)現(xiàn)如 斗魚(yú)直播間雪碧圖或以下知乎的雪碧圖， 造成的性能消耗肯定不?。?/p>

綜上所述， 網(wǎng)站開(kāi)發(fā)中遇到小圖標(biāo)顯示， 優(yōu)先考慮雪碧圖實(shí)現(xiàn)； 那么問(wèn)題來(lái)了， 小圖標(biāo)合并成一張圖片，如果需求有改動(dòng)導(dǎo)致雪碧圖修改（新增或修改小圖標(biāo)）， 更糟糕的是多個(gè)開(kāi)發(fā)人員的功能模塊都得調(diào)用該雪碧圖（意味著多人會(huì)修改到雪碧圖）， 該如何開(kāi)發(fā)、維護(hù)雪碧圖呢？

慕課網(wǎng)雪碧圖教程推薦軟件，CssGaga 幫助索引PS： 該軟件只有windows版本， 并未找到mac版；CssGaga如何實(shí)現(xiàn)雪碧圖呢？
1.下載安裝該軟件；
2.選中“圖片合成”菜單后， 將小圖標(biāo)拖入軟件首頁(yè)即可生成對(duì)應(yīng)的雪碧圖以及CSS Sprite代碼；

3.根據(jù)上述生成的雪碧圖以及對(duì)應(yīng)圖標(biāo)位置，編寫CSS；

.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問(wèn)題比較多：

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

2.多人維護(hù)雪碧圖時(shí)，溝通成本較高(得確認(rèn)新的雪碧圖中舊小圖標(biāo)位置是否有變化)；
接下來(lái)分析的實(shí)現(xiàn)方案2普及率比較高， 應(yīng)該是目前大部分前端組的實(shí)現(xiàn)方式；

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

2.新建PSD文件根據(jù)設(shè)計(jì)稿確定初始大?。?00*150；

3.復(fù)制設(shè)計(jì)稿圖層；

4.雪碧圖PSD新建參考線；

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

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

7.獲取小圖標(biāo)大小、位置；
選中圖層， Ctrl+T (mac: Commond + T)， 在信息面板查看圖層信息；

8.根據(jù)雪碧圖 編寫對(duì)應(yīng)CSS；

以上步驟雖然多 熟悉后其實(shí)很快， 但 其對(duì)新手而言的確不友好；

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

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

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

2.PSD文件比較大， 也不太適合保存在項(xiàng)目中， 一般放SVN共享維護(hù)；（SVN服務(wù)器宕機(jī)、PSD文件沖突等也需要不少時(shí)間成本）
好了，接下來(lái)分析的是實(shí)現(xiàn)方式3， 使用自動(dòng)化部署工具gulp生成雪碧圖，也是本文推薦的雪碧圖實(shí)現(xiàn)方式！

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

gulp環(huán)境搭建無(wú)非就是 安裝nodejs?然后通過(guò)npm(建議使用cnpm)安裝gulp模塊；
具體可參考：前端構(gòu)建工具gulp的使用；
使用gulp自動(dòng)生成雪碧圖有兩種實(shí)現(xiàn)方式?gulp生成 css 代碼

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

1.安裝 gulp 開(kāi)發(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可以明顯提高編寫樣式的效率）

實(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語(yǔ)法帶“_”前綴的文件為調(diào)用模塊， 只能被其他sass文件調(diào)用不會(huì)被編譯成同名css文件；生成的_mySprite.scss文件手動(dòng)添加到目標(biāo)樣式index.scss中調(diào)用， 然后通過(guò)監(jiān)聽(tīng)（配置文件的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問(wèn)題：
1.gulp 相關(guān)知識(shí)得熟悉才能寫出對(duì)應(yīng)的配置文件；

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

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

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

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

1.配置webpack開(kāi)發(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問(wèn)題：

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

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

除了 gulp 跟 webpack 外，還有國(guó)產(chǎn)前端部署的解決方案FIS3, 其對(duì)小圖標(biāo)也有一套部署配置流程， 因?yàn)椴涣私饩筒粚懥耍?感興趣的同學(xué)可以去學(xué)習(xí)下；webpack跟FIS3包含的其他功能多一些（特別是FIS3可稱為完整的解決方案），一般項(xiàng)目如果大方向的技術(shù)選型沒(méi)定webpack或FIS3,就單純完成雪碧圖而言不太推薦；
最后說(shuō)明下， 上述的demo實(shí)現(xiàn)是有瀏覽器兼容問(wè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中文指南