1. 简介
sprity-dirs 是一个 npm 包，用于将图片文件夹中的图片自动合并成一个雪碧图，并生成对应的 CSS 文件。通过使用雪碧图，可以减少 HTTP 请求，提高网页加载速度。本文将介绍如何使用 sprity-dirs。
2. 安装
在命令行输入以下命令安装 sprity-dirs：
npm install sprity-dirs -g
3. 使用方法
3.1 命令行方式
在命令行中进入要合并成雪碧图的图片文件夹，输入以下命令：
sprity-dirs . -o dist --style style.css
其中，'.' 是图片文件夹的路径，'-o dist' 是输出目录，'--style style.css' 是要生成的 CSS 文件名。
3.2 JavaScript 方式
-- -------------------- ---- ------- ----- ---------- - ----------------------- --- --- - --------------------- -- ---------- --- ---- - --------------------- -- ---- --- ----- - -------------------- -- --- --- --- --- ------- - - -- -- -- --------------- ----- ------ -------- -------- -- --------------------- ----------------------展开代码
4. 选项
4.1 format
指定生成的图片的格式，可以是 png、jpeg、gif 和 svg。默认为 png。
{ format: 'jpeg' }
4.2 style-type
指定生成的 CSS 格式，可以是 css 或 scss。默认为 css。
{ styleType: 'scss' }
4.3 name
生成的雪碧图文件和 CSS 文件名的前缀。默认为 'sprite'。
{ name: 'my-sprite' }
4.4 prefix
CSS 类名的前缀。默认为空。
{ prefix: 'icon-' }
4.5 dimensions
指定生成的雪碧图的尺寸。可以是以下格式：'auto'、'50%'、{ width: 100, height: 200 }。默认为 'auto'。
{ dimensions: '50%' }
4.6 margin
指定每个图片之间的间隔。可以是以下格式：'10px'、{ top: 5, right: 10 }。默认为 0。
{ margin: '10px' }
5. 示例
假设有如下文件夹结构：
images/ ├── apple.png ├── banana.png ├── cherry.png └── orange.png
执行以下命令生成雪碧图和对应的 CSS 文件：
sprity-dirs images/ -o dist --style main.css
生成的 'dist' 目录结构为：
dist/ ├── main.css └── sprite.png
生成的 'main.css' 文件内容为：
-- -------------------- ---- ------- ------ - ----------------- ---------------- -------------------- ---- ----- ------ ------ ------- ------ - ------- - ----------------- ---------------- -------------------- ------ ----- ------ ------ ------- ------ - ------- - ----------------- ---------------- -------------------- ------ ----- ------ ------ ------- ------ - ------- - ----------------- ---------------- -------------------- ------ ----- ------ ------ ------- ------ -展开代码
6. 结论
使用 sprity-dirs 可以轻松地将多张图片合并成一个雪碧图，并自动生成对应的 CSS 文件。通过使用雪碧图，可以减少 HTTP 请求，提高网页加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709e8ccae46eb111efff
