gulp

[CSS] 工具文 — gulp.spritesmith 快速製作雪碧圖

許馨方 Mia Hsu 2021/09/29 10:44:14
122

雖然說 VS code 上也有製作雪碧圖的套件 Image Sprites ,

但每個人 vscode 的設定檔不大相同,加上日後需要調整彈性低,

所以就選擇了 gulp 並以工具包的概念製作。

 

- 使用的套件:gulp.spritesmith

- 工具包範例檔:gulp.spritesmith-demo

 

在這之前你必須....


  • 知道如何開啟 vs code 的終端機( Control + ~
  • 準備好要 1x、2x 圖
  • 以下終端機指令都將會以 $ 這個提示字元與一個空白字元來表示,但是你不需要鍵入這兩個字元,電腦會很貼心的幫你打好 :)

檔案目錄說明


gulp-spritesmith/
  ├── original-images  --> 放入需 @1x、@2x 的圖片)
  ├── sprite           --> 生成之 sprite 相關檔案 png、css、scss
 

工具包使用說明


若非第一次使用可直接跳到 [Step4. 輸出檔案]

Step1. 檢查電腦是否已安裝 node.js, npm, and npx

$ node --version
$ npm --version
$ npx --version
 
  • 如無安裝請至 node.js 載點,點擊下一步安裝即可~
  • 安裝 node.js 時會一併裝好 npm 及 npx
  • 安裝好 node.js 後可以再檢查一次是否安裝成功
  • [補充說明] 什麼是 node.js and npm?

 

Step2. 安裝此工具包需使用之套件

$ npm install
 

Step3. 將圖檔放入 original-images

必須放入 1x 及 2x,可直接使用 zeplin 下載的格式即可,無需重新命名。

Step4. 輸出檔案

$ npm run build
 

執行完畢會得到以下 4 個檔案:

  1. _sprite.scss
  2. sprite.css
  3. sprite.png
  4. sprite@2x.png

就完成雪碧圖的製作囉!

 

補充說明:gulp 內設定

{
    retinaSrcFilter: ["./original-images/*@2x.png"],
    imgName: "sprite.png",
    retinaImgName: "sprite@2x.png",
    imgPath: "../images/sprite.png", // file url:images
    retinaImgPath: "../images/sprite@2x.png", // same imgPath
    cssName: cssName,
    algorithm: "binary-tree", // binary-tree, left-right, top-down
    padding: 1,
  }

 

檔案使用說明


CSS 使用方法(sprite.css)

放置相關檔案

  • sprite.pngsprite@2x 放入 /images
  • sprite.css 檔放入 /css

使用說明

  • class 名為檔名加上前綴 icon-

    • File Name: deleted-green.png
    • Class Name: .icon-deleted-green
  • HTML <i> 使用方法:

<i class="icon-deleted-green"></i>
 

SCSS 使用方法(_sprite.scss)

放置相關檔案

  • sprite.pngsprite@2x 放入 /images
  • _sprite.scss 檔放入 /scss

使用說明

step1. 使用 import 的方式將 sprite.scss 引入需使用的 scss 檔最上方

@import "../sprite";
 

step2. 用 include 引用個別 icon,舉例:

.icon-deleted-green {
   @include sprite($deleted-green);
}
許馨方 Mia Hsu