跳到主要內容

gulp 前端自動化 - spritesheet

大家好,我是奶綠茶
今天來介紹如何使用 gulp 來自動化將圖片拼成 spritesheet
奶綠我使用的套件是 gulp.spritesmith
https://www.npmjs.com/package/gulp.spritesmith
可以使用 handlebars 格式,拼出自己想要的 css 格式

{{#sprites}}
.{{name}} {
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};
    background-image: url({{{escaped_image}}});
}
{{/sprites}}

gulp 的設定

gulp.task('sprite',()=>{
    console.log('sprite');
    const spriteData = gulp.src('src/sprite_src/*')
        .pipe(spritesmith({
            imgName: '../img/sprite.png',
            cssName: '_sprite.css',
            padding: 4,
            imgOpts: { quality: 100 },
            cssTemplate: 'src/css/handlebars/basic.handlebars',
        }));
    const imgStream = spriteData.img
        .pipe(buffer())
        .pipe(gulp.dest('dist/img/'));

    const cssStream = spriteData.css
        .pipe(gulp.dest('src/css'));
    return merge(imgStream, cssStream);
});
發佈後,就會產生對映的圖片和css檔

問題
在製作按鈕圖案時,都會把一般和hover的圖合拼在一張
這樣在 :hover 時只要指定 background-position:bottom 就可以
但現在經過合拼成 spritesheet 時,background-position 座標會有問題
所以我們來修正一下
在合拼時,判斷如果檔名有 _btn 就套用新的規則
新增 ifIndexOfBTN 表籤,加入自定的函式

{{#sprites}}
{{#ifIndexOfBTN name}}
.{{name}} {    
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{half height}};    }
    .{{name}}:hover {   background-position:{{px.offset_x}} {{hoverPosition offset_y height}};   }
{{else}}
.{{name}} {    
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};  }

{{/ifIndexOfBTN }}
{{/sprites}}

更新gulp

.pipe(spritesmith({
 略 
 cssTemplate: 'src/css/handlebars/basic.handlebars',
 cssHandlebarsHelpers: {
  ifIndexOfBTN(name, options) {
   if (name.indexOf('_btn') !== -1) {
    return options.fn(this);
   }
   return options.inverse(this);
  },
  hoverPosition(position, height) {
   return `${position - (height / 2)}px`;
  },
  half(num) {
   return `${Math.floor(num / 2)}px`;
  },
 },
}));

handlebar 遇到自定的 tag 或是函式時
就會到 spritesmith 裡的 cssHandlebarsHelpers 去找對映的函式
完成。


轉載請註明出處
Github Source Code

留言

這個網誌中的熱門文章

Youtube影片增加外部連結功能

大家好,我是奶綠茶 在 Youtube 播放影片時,能夠增加註解 或是點擊後到另一個 Youtube 影片 但如果想要點擊後連到任意的網址呢? 是可以的,但有二個地方要設定一下, 1. 先到你的youtube 功能設定, 開啟外部註解功能 https://www.youtube.com/features 2. 認證你的關聯網站 你必需是網站的擁有者,有幾種驗證方法,選一個用就可以 完成後,在新增註解的地方 就可以下拉選擇關聯網站 看一下成品 https://www.youtube.com/watch?v=fL9to6qbDr8

超好用的無限免費網頁空間,無廣告,無流量限制

大家好,我是奶綠茶 今天來教大家如何申請一個無限免費速度又快的網頁空間 1 首先到  https://github.com/ 申請帳號(一直下一步,下一步,下一步) 2 到你的個人頁,切換上方的 tab 到 Repositories, 按下右鍵的 new 3 Repository name 一定要是這樣的格式 username.github.io 我的 github 網址是 github.com/milkmidi 那就要輸入 milkmidi.github.io 選擇 public, 這樣別人才看的到 private 有其他用途, 而且要付費才能使用 完成後按下 Create repository 5 安裝 SourceTree github 並不支援 FTP 或是網頁上傳,一定要透過指令碼 在這我們選用有圖型介面的軟體,方便大家學習 https://www.sourcetreeapp.com/ 下載並安裝 啟動後登入你的 github 帳號 6 clone 你的 github io 專案 右上角有個 Clone or download 點選後 複製 https 連結(不要選到 ssh ) 7 將 https 的連結貼到 SourceTree 8 上傳 html 到本機 github.io 資料夾,放一個 index.html 切換到 SourceTree, 這時會看到 Unstaged files 的欄位 選擇 Stage All 9 git 要求每次的 Commit, 都一定要打說明文字(好習慣) 輸入完成後,按下右邊的 Commit 10 發佈(Push),這樣就完成啦 可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來 其他 Commit 可以想像是做一個記錄,你可以很多的 Commit 最後再一次 Push 上去 github 原本是給程式設計師用的版本控管服務 免費版提供無限空間讓你放檔案,但一定要是 public 想要有私有的 Project ,就只能付費 github.io 只能放靜態檔案,php, aspx 服務並不支援。 祝大家學習愉快 轉載請註明出處 奶綠的 github.io S

Android ImageView ScaleType

大家好,我是奶綠茶 在 Android 裡的 ImageView 元件,可以放置圖片 其中可以設定 ScaleType 官方 API 說明 為了方便測試,在這先準備二張圖片 450x500和 500x450 筆者以 320x480 的 Emulator 來測試 Layout 的部份放上二個 RadioButton 用來切換二圖不同 Size 的圖片 再放上六個 Button 來顯示圖片同 Size 的圖片 再放上六個 Button 來顯示圖片 主程式 package milkmidi.tutorial.imagescaletype; import android.app.Activity; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager.LayoutParams; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.PopupWindow; import android.widget.RadioGroup; import android.widget.RadioGroup.OnCheckedChangeListener; import android.widget.TextView; public class ImageViewScaleTypeMainActivity extends Activity implements OnCheckedChangeListener { Drawable mCurrentDrawable; @Override public void onCreate(Bundle savedInstanceState) {