摘要：無論是早期工具，還是現在流行的配合這類構建工具而產生的雪碧圖插件。

本文原文鏈接：https://devework.com/postcss-...，轉載請注明原始來源，謝謝！

postcss-lazysprite 是一個基于PostCSS 開發的用于生成雪碧圖圖片及其CSS 的插件，經過半年持續迭代，現已穩定用在微信旗下兩款產品的Web 業務中。其與市面上的雪碧圖插件不同在于生成雪碧圖的“懶惰”姿勢。

前端界，伴隨著雪碧圖這個概念出現，自動化工具產生雪碧圖這類工具就層出不窮。無論是早期GUI 工具，還是現在流行的配合Gulp/Grunt/Webpack 這類構建工具而產生的雪碧圖插件。總之是百花齊放，長江后浪推前浪。

根據輸入方式的不同，現在市面上基于Node.js 的雪碧圖構建工具一般可分為如下兩種（如有不實，望予以指出）：

一種是現在國外常見的基于spritesmith 的各類通過構建工具注冊任務進行合并產生雪碧圖的插件，如gulp-sprite、css-sprite、sprity 等。

// 本段代碼來自sprity 的sample
gulp.task("sprites", function () {
  return sprity.src({
    src: "./src/images/**/*.{png,jpg}",
    style: "./sprite.css",
    processor: "sass",
  })
  .pipe(gulpif("*.png", gulp.dest("./dist/img/"), gulp.dest("./dist/css/")))
});

另一種是國內以cssgaga、gulp-tmtsprite 為代表的，在開發階段是寫單個小圖的CSS 樣式，然后也是通過構建工具的注冊任務進行合并產生雪碧圖的插件。

// 本段代碼來自gulp-tmtsprite 的sample
// Input
.icon-test {
    width: 32px;
    height: 32px;
    background-image: url(../slice/test.png);
}

// Output
.icon-test {
    background-image: url(../sprite/style-index.png);
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-webkit-min-device-pixel-ratio: 2.5), 
only screen and (min-resolution: 240dpi) {
.icon-test { 
    background-image:url("../sprite/style-index@2x.png");
    background-position: -36px -66px;
    background-size: 32px;
}
}

各類工具本身有其合理存在的理由與最適合的使用場景，去褒貶來襯托我這個插件并不是本文的目的。如上面介紹的兩種類型的插件，一種是將雪碧圖合成從常規的寫CSS 行為中抽離出來，一種是后編譯的雪碧圖合成，其使用場景各不相同。本文介紹的postcss-lazysprite，在于解決的場景是：我想在開發階段就生成雪碧圖并用上其CSS，同時我又想很方便地產生，用起來越簡單越好。所謂lazysprite，就是期許一種“懶惰”的方式去生成雪碧圖。

postcss-lazysprite 用起來就是那么簡單，經過配置后，你只需要這樣寫：

/* ./src/css/index.css */
@lazysprite "filetype";

輸出的自然是完整的雪碧圖以及相應CSS：

/* ./dist/css/index.css */
.icon-filetype-doc {
    background-image: url(../sprites/filetype.3f1f178013.png);
    background-position: 0 0;
    width: 80px;
    height: 80px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2/1), only screen and (min-device-pixel-ratio:2), only screen and (min-resolution:2dppx), only screen and (min-resolution:192dpi) {
    .icon-filetype-doc {
        background-image: url(../sprites/filetype@2x.cbed5ca6a9.png);
        background-position: 0 0;
        background-size: 170px 170px;
    }
}

假設后面要新增圖片到filetype 文件夾，那么直接丟進去就能自動重新合并并更新CSS；如果要新建一個與filetype 同級的文件夾（如logos），那么在需要的位置@lazysprite "logos";即可。一切就是那么簡單，所謂lazy，即是如此。

如果你有用過Sass 框架Compass 的話，你會覺得跟Compass 的雪碧圖產生方式是如此類似。是的，這個插件就是沿用了Compass 的雪碧圖思路，甚至這個插件的的底層就是spritesmith 驅動的，而我在寫這個插件的時候參考了postcss-sprite 的寫法——整個插件其實是在前端開源環境下，結合自身的需求而來的產物。

可能有讀者看到這里還不是很清楚postcss-sprite 的運作方式。這里以Gulp 構建流為例，講述下其運作方式。

假設你的項目目錄如下：

.
├── gulpfile.js
├── dist
└── src
    ├── css
    │   └── index.css
    ├── html
    │   └── index.html
    └── slice
        └── filetype
            ├── doc.png
            ├── doc@2x.png
            ├── pdf.png
            └── pdf@2x.png

src 是放編譯前的CSS（現在一般是Sass 或Less 的源文件）以及雪碧圖源圖（即單個小圖）；dist則是編譯后 CSS 及產生的雪碧圖圖片及其CSS。

然后在gulpfile.js 配置如下：

var gulp = require("gulp");
var postcss = require("gulp-postcss");
var lazysprite = require("postcss-lazysprite");

gulp.task("css", function () {
    return gulp.src("./src/css/**/*.css")
        .pipe(postcss([lazysprite({
            imagePath:"./src/slice",
            stylesheetInput: "./src/css",
            stylesheetRelative: "./dist/css",
            spritePath: "./dist/slice",
            smartUpdate: true,
            nameSpace: "icon-"
        })]))
        .pipe(gulp.dest("./test/dist/css"));
});

上面的每個option 解釋下：

imagePath：雪碧圖小圖所在目錄；
stylesheetInput：CSS 文件所在的目錄，一般與gulp.src的路徑相關；
stylesheetRelative：為了在生成的CSS 中構造相對路徑而引入，一般與gulp.dest的路徑相關；
spritePath：生成的雪碧圖放置的目錄；
smartUpdate： 是否啟用智能更新機制，關于smartUpdate，請見下一章節的介紹。
nameSpace：CSS 的命名空間。

注意下你的gulp css任務一般是gulp.watch以及默認任務的一部分。

然后你在src/css/index.css里面寫下這段話：

@lazysprite "filetype";

輸出內容見上一章節相同部分，就不重復了。

filetype即是在spritePath: "./dist/slice"定義的目錄下的子目錄，這個目錄下的所有雪碧圖小圖會合成為一張雪碧圖，圖片名稱默認是以filetype.png命名。

同時filetype也會作為生成的小圖對應CSS class 的一部分。CSS class 的構成即是“命名空間+目錄名+小圖片名”。如doc.png生成的對應類名為.icon-filetype-doc——然后你在HTML 中引入CSS 文件，通過用即可。

postcss-lazysprite 雖然是站在巨人的肩膀上的產物，但其還是有不少亮點值得一說。

支持 Retina 不是什么新鮮事，但postcss-lazysprite 支持@2x, @3x, _2x, _3x這四種后綴的 Retina 圖片，而且"@"與"_"的命名完全可以混用。

檢測到非標準 Retina 圖片會予以提示，如@2x 圖片非偶數尺寸的時候。

支持Source Map，這個不多說，之所以是基于 Postcss 開發，就是為了能支持Source Map。

支持:hover、:active 這類場景，即一些如鼠標 hover 上去需要變logo 的場景。

采用緩存方式以及SmartUpdate 以提升運行時候的性能。如本文開頭所言，postcss-lazysprite 目標是開發階段就能用上雪碧圖，所以緩存機制很重要，總不能在開發階段每保存一次 CSS 就重新走一遍“遍歷所有圖片并生成雪碧圖”的流程。所以只要在開發階段沒有動過圖片或修改@lazysprite 的代碼，除開發階段第一次啟動 Gulp 任務的時候，其它時間均不會重復運行相關流程。另外在配置了SmartUpdate后，會將生成的圖片文件名加入 hash，這樣下一次啟動 Gulp 任務的時候，只要源圖片沒有變化，也不會重復雪碧圖流程。

npm 安裝：

npm i postcss-lazysprite -S

插件本身擁有近十個 opiton 方便用戶根據實際需求自定義相關細節，請參考 README 。

postcss-lazysprite 托管到 Github 上：https://github.com/Jeff2Ma/postcss-lazysprite，歡迎前往提 issues 或參與開發。當然，歡迎先送個star ~

相關文章：

從0到1：PostCSS 插件開發最佳實踐

PostCSS 插件postcss-lazyimagecss：自動填寫width / height 屬性

本文原文鏈接：https://devework.com/postcss-...，轉載請注明原始來源，謝謝！