Home | 簡體中文 | 繁體中文 | 雜文 | 打賞(Donations) | ITEYE 博客 | OSChina 博客 | Facebook | Linkedin | 知乎專欄 | Search | Email

4.4. CSS Sprite

		
簡介
gulp-spriter:幫助前端工程師將css代碼中的切片圖片合併成雪碧圖,支持retina圖片。

功能
使用二叉樹排列算法,對圖片排序優化
自動收集css中帶切片的圖片(僅對background-image:url("slice/xx.png")有效)
自動在原來的css中添加background-position屬性
支持生成適用於高清設備的雪碧圖,並在css檔案追加媒體查詢css代碼
依賴
gulp-spriter使用spritesmith作為圖片生成的基礎算法

安裝
npm install gulp-spriter
配置
導入gulp-spriter依賴:

var spriter = require("gulp-spriter");
 
gulpfile配置檔案中增加task,如下:

gulp.task("css",["clean"],function(){
  return gulp.src("./src/css/xxx.css")
         .pipe(spriter({
            sprite:"test.png",
            slice:"./src/slice",
            outpath:"./build/tests"
          }))
         .pipe(gulp.dest('./build/css'))
})
參數
sprite:[string] 必須,設置輸出的雪碧圖名稱
slice:[string] 必須,切片檔案存放位置,基于根目錄
outpath:[string] 必須,輸出的雪碧圖位置