本文原文链接：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/[email protected]");
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/[email protected]);
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
├── [email protected]
├── pdf.png
└── [email protected]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-...，转载请注明原始来源，谢谢！