简介
sprity-cy 是一个能够将多张图片合并成一张雪碧图并自动生成 CSS 样式的 npm 包。该包具有以下特点：
- 支持多种图片格式，如 png、jpeg、gif、svg 等；
- 支持多种 CSS 样式格式，如 css、scss、less 等；
- 支持生成 retina 雪碧图；
- 支持自定义 CSS 样式模板。
在开发前端项目时，使用雪碧图能够大量减小页面加载的时间，也方便维护。sprity-cy 包提供了一种简便的方式来生成雪碧图和相关样式文件，大大提高了开发效率。
安装
在项目中安装 sprity-cy 可以使用 npm 命令：
npm install sprity-cy --save-dev
使用
命令行
sprity-cy 提供了命令行接口，方便快捷地生成雪碧图和相关样式文件。可以在命令行中输入以下命令：
sprity path/to/source/folder path/to/output.png [options]
其中第一个参数是图片文件夹的路径，第二个参数是生成的雪碧图输出路径。options 可以是以下参数：
-s, --style: 指定 CSS 样式输出格式，默认为 css。-p, --processor: 指定 CSS 处理器，如 less、scss 等。-d, --dimension: 指定雪碧图尺寸，可以是 auto、max、<width>x<height> 或者 <max_width>x<max_height>。-r, --retina: 生成 retina 雪碧图。-t, --template: 自定义 CSS 样式模板。
例如要将 images 文件夹下的所有 png 图片生成一张雪碧图和相关样式文件，并将输出路径设置为 dist/image.png 和 dist/image.scss，可以执行以下命令：
sprity images dist/image.png -s scss -p sass -t path/to/custom/template
作为模块
sprity-cy 也可以作为一个模块引入到项目中使用。需要使用 require 或者 import 导入模块：
const sprity = require('sprity-cy');使用模块需要调用 sprity.create(sources, options) 函数，其中 sources 是图片源路径（可以是一个 glob 模式），options 是一个对象，包含以下属性：
out: 输出文件夹路径及名称，如dist/sprites/sprites.pngstyle: CSS 样式输出格式，默认为 css。processor: CSS 处理器，如 less、scss 等。dimension: 雪碧图尺寸，可以是 auto、max、<width>x<height> 或者 <max_width>x<max_height>。retina: 是否生成 retina 雪碧图，默认为 false。template: 自定义 CSS 样式模板。
例如要将 images 文件夹下的所有 png 图片生成一张雪碧图和相关样式文件，并将输出路径设置为 dist/image.png 和 dist/image.scss，可以执行以下命令：
sprity.create('images/*.png', {
out: 'dist/image.png',
style: 'scss',
processor: 'sass',
template: 'path/to/custom/template'
});深入学习
- 深入学习 CSS 雪碧图：https://www.w3cplus.com/css3/optimizing-web-graphics-css-sprites.html
- 学习如何使用 gulp 生成雪碧图：https://www.npmjs.com/package/gulp-sprity
总结
sprity-cy 是一个能够快速生成雪碧图和相关样式文件的 npm 包。它提供了命令行和模块两种使用方式，并支持多种图片和样式格式，方便灵活。可以结合深入学习文章和其他插件一起使用，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111f003