摘要：無論是早期工具，還是現(xiàn)在流行的配合這類構(gòu)建工具而產(chǎn)生的雪碧圖插件。

本文原文鏈接：https://devework.com/postcss-...，轉(zhuǎn)載請(qǐng)注明原始來源，謝謝！

postcss-lazysprite 是一個(gè)基于PostCSS 開發(fā)的用于生成雪碧圖圖片及其CSS 的插件，經(jīng)過半年持續(xù)迭代，現(xiàn)已穩(wěn)定用在微信旗下兩款產(chǎn)品的Web 業(yè)務(wù)中。其與市面上的雪碧圖插件不同在于生成雪碧圖的“懶惰”姿勢。

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

根據(jù)輸入方式的不同，現(xiàn)在市面上基于Node.js 的雪碧圖構(gòu)建工具一般可分為如下兩種（如有不實(shí)，望予以指出）：

一種是現(xiàn)在國外常見的基于spritesmith 的各類通過構(gòu)建工具注冊(cè)任務(wù)進(jìn)行合并產(chǎn)生雪碧圖的插件，如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/")))
});

另一種是國內(nèi)以cssgaga、gulp-tmtsprite 為代表的，在開發(fā)階段是寫單個(gè)小圖的CSS 樣式，然后也是通過構(gòu)建工具的注冊(cè)任務(wù)進(jìn)行合并產(chǎn)生雪碧圖的插件。

// 本段代碼來自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/[email protected]");
    background-position: -36px -66px;
    background-size: 32px;
}
}

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

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

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

輸出的自然是完整的雪碧圖以及相應(yīng)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/[email protected]);
        background-position: 0 0;
        background-size: 170px 170px;
    }
}

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

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

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

假設(shè)你的項(xiàng)目目錄如下：

.
├── gulpfile.js
├── dist
└── src
    ├── css
    │   └── index.css
    ├── html
    │   └── index.html
    └── slice
        └── filetype
            ├── doc.png
            ├── [email protected]
            ├── pdf.png
            └── [email protected]

src 是放編譯前的CSS（現(xiàn)在一般是Sass 或Less 的源文件）以及雪碧圖源圖（即單個(gè)小圖）；dist則是編譯后 CSS 及產(chǎn)生的雪碧圖圖片及其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"));
});

上面的每個(gè)option 解釋下：

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

注意下你的gulp css任務(wù)一般是gulp.watch以及默認(rèn)任務(wù)的一部分。

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

@lazysprite "filetype";

輸出內(nèi)容見上一章節(jié)相同部分，就不重復(fù)了。

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

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

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

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

檢測到非標(biāo)準(zhǔn) Retina 圖片會(huì)予以提示，如@2x 圖片非偶數(shù)尺寸的時(shí)候。

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

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

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

npm 安裝：

npm i postcss-lazysprite -S

插件本身擁有近十個(gè) opiton 方便用戶根據(jù)實(shí)際需求自定義相關(guān)細(xì)節(jié)，請(qǐng)參考 README 。

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

相關(guān)文章：

從0到1：PostCSS 插件開發(fā)最佳實(shí)踐

PostCSS 插件postcss-lazyimagecss：自動(dòng)填寫width / height 屬性

本文原文鏈接：https://devework.com/postcss-...，轉(zhuǎn)載請(qǐng)注明原始來源，謝謝！