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