使用nodejs怎么實現一個雪碧圖制作工具

使用nodejs怎么實現一個雪碧圖制作工具？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

前顏（yan）

雪碧圖（CSS sprite ），就是把很多小圖標合并為一張圖片。

在Web開發中，使用雪碧圖是優化Web性能的一種方法。

比如你可能遇到過這樣的一種場景：在你的頁面中，使用到了很多的小圖標，然后你的每個小圖標都是通過 <img src='logo.png'>來引用的。

通過這種方式雖然比較方便，但是存在的一個缺點就是性能問題，即瀏覽器在解析每個小圖標時，都要發起一次http或（https）請求，而這個小圖標本身卻很小，可能只有十幾k甚至幾k，那么為每個小圖標單獨發起http請求，其實有點資源浪費。

為什么會資源浪費呢？

瀏覽器在與服務器進行http請求的過程中，需要有一個類似握手通信的過程，然后才是真正的獲取數據。

舉個例子，在這里我把瀏覽器發起的http圖片請求簡單分為兩個過程，分別為：

1、瀏覽器與服務器的通信握手過程，假設耗時X ms（毫秒）

2、真正的數據獲取過程，假設耗時 Y ms（毫秒）

那么瀏覽器發起一次http請求的總耗時為：sum(1)=X+Y ms，由于小圖標數據很小，可能只有幾k，因此通信過程的耗時X是大于Y的。

而當你在網頁中引用了很多小圖標時，假設有n個小圖標，此時總耗時為sum(n)=nX+nY ms，通過對比sum(1)和sum(n)，你就會發現，上面所說的資源浪費主要是在于通信握手的時間Y。此時，我就會想，如果我一次性取得所有的小圖標，那么總耗時就變成了sum(n)=nX+Y ms，這樣就能節省(n-1)Y的http握手通信的時間開銷，從而優化了web的響應性能。

一、雪碧圖摳圖（background-position）

通過前面的介紹，我們知道，雪碧圖的原理就是將頁面中使用到的小圖標合成為一張總圖。這樣的話當我們想要使用雪碧圖中的某一個小圖標，應該通過如何實現呢？

答案是通過css的background-position，background-position的默認坐標是（0，0），關于background-position的詳細使用，大家可以網上搜索一下，資料很多。（這次主要講雪碧圖制作工具）

二、雪碧圖制作工具 simple-sprite

那么如何合成雪碧圖呢？怎樣才能更方便的合成雪碧圖呢？

因為懶，我的想法是，每次當我需要合成雪碧圖時，我只要經過以下盡量簡單的步驟就可以快速合成，并且可以導出各個小圖標在雪碧圖中的background-position css樣式。為此，我用nodejs寫了一個雪碧圖制作工具：simple-sprite，并打包生成npm包發布至npm官網。

雪碧圖制作步驟如下：

1 創建雪碧圖生成工程

mkdir sprite-generator
cd sprite-generator

2 初始化工程

npm init

3 把所有小圖標放到imgs中

mkdir imgs && 把所有的小圖標放到imgs中

4 下載simple-sprite npm包

npm install --save simple-sprite

5 運行生成雪碧圖

let sprite = require('simple-sprite');

sprite.generateSprite('./imgs');

看完上述內容，你們掌握使用nodejs怎么實現一個雪碧圖制作工具的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！