4.6.CSSSprite

		
簡介
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] 必須，輸出的雪碧圖位置
		
		

原文出處：Netkiller 系列 手札
本文作者：陳景峰
轉載請與作者聯絡，同時請務必標明文章原始出處和作者資訊及本宣告。