雪碧圖生成以及配合預處理樣式的使用

生成雪碧圖的代碼

---

本文的樣式預處理使用的是stylus 若是需要用到其它類型的預處理器，可對下面的代碼進行修改
若是想對雪碧圖的生成原理及參數有更深刻的瞭解請移步

• spritesmith
• gulp.spritesmith

const spritesmith = require("gulp.spritesmith");
gulp.task("sprite", () => {
  var spriteData = gulp.src("./src/styles/img/icons/*.png").pipe(
    spritesmith({
      // 生成雪碧圖的位置以及名稱
      imgName: "img/sprite.png",
      // 生成的雪碧圖的樣式位置
      cssName: "__sprite.styl",
      // 雪碧圖中圖片與圖片的padding
      padding: 5,
      // 雪碧圖中圖片的排列方式
      algorithm: "binary-tree",
      // 這裏是生成__sprite.styl的模板文件，需要針對不圖的樣式預處理器進行我的的修改
      cssTemplate(data) {
        var fuc = [];
        var perSprite = [];
        var shared = "sicon() { background-image: url(I); display: inline-block; vertical-align: middle; position: relative; top: -2px; background-size: Wpx Hpx; }"
          .replace("I", data.spritesheet.image)
          .replace("W", data.spritesheet.width)
          .replace("H", data.spritesheet.height);
        Array.prototype.forEach.call(data.sprites, function(sprite) {
          fuc.push(
            "sicon-N() { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
              .replace(/N/g, sprite.name)
              .replace("W", sprite.width)
              .replace("H", sprite.height)
              .replace("X", sprite.offset_x)
              .replace("Y", sprite.offset_y)
          );
          perSprite.push(
            "\t.sicon-N {\t\n\t\tsicon-N()\t\n\t}".replace(/N/g, sprite.name)
          );
        });
        return (
          shared + '\n' +
          fuc.join("\n") +
          "\nsprites(){\n\t" +
          ".sicon{\n\t\tsicon()\n\t}" +
          "\n" +
          perSprite.join("\n") +
          "\n}"
        );
      }
    })
  );

  return spriteData.pipe(gulp.dest("./src/styles"));
});

這段代碼會在指定位置生成__sprite.styl的函數集合文件

生成的__sprite.styl格式以下(生成的格式取決於cssTemplate的內容)：

sicon() { 
    background-image: url(img/sprite.png); 
    display: inline-block; 
    vertical-align: middle; 
    position: relative; 
    top: -2px; 
    background-size: 286px 256px;
}
sicon-checkbox-checked-focus() { 
    width: 17px; 
    height: 17px; 
    background-position: -22px -220px;
}

sprites(){
    .sicon{
        sicon()
    }
    .sicon-checkbox-checked-focus {    
        sicon-checkbox-checked-focus()    
    }
}

使用

全局使用

能夠在入口處調用sprites()函數，生成全局樣式

局部使用

調用對應圖片的函數以及公用函數便可
以下：

.xxx{
    sicon()
    sicon-checkbox-checked-focus()
}

最後

但願對你們有用，平時不太愛寫文章。能寫上來的都是比較實用的東西