spirit-cli是vscode中基于node快速生成css精灵图最轻量方案，无需脚本、不依赖webpack插件，一行命令即可生成sprite.png和sprite.css；它规避了spritesmith老旧css格式和手写脚本的兼容性、细节处理等问题，内置合理默认值且输出现代浏览器可直接消费的css。
spirit-cli 是目前在 VSCode 中基于 Node 环境快速生成 CSS 精灵图最轻量、最直接的方案，无需写脚本、不依赖 Webpack 插件，命令行一行搞定。
为什么不用 spritesmith 或手写 Node 脚本？
你确实可以用 spritesmith 配合 Webpack 或独立 Node 脚本拼图，但实际项目中容易卡在几个地方：spritesmith 默认输出 CSS 格式老旧（如 background-position: 0px 0px），不支持现代单位（rem、vw）；自写脚本要处理图片尺寸对齐、透明通道、间距留白等细节，images 库在 Node 20+ 下有兼容问题，sharp 又得额外学 API。而 spirit-cli 内置了合理默认值，且输出 CSS 可直接被现代浏览器消费。
spirit-cli 安装与基础用法
打开 VSCode 内置终端（Ctrl + `），确保已安装 Node.js（运行 node -v 和 npm -v 验证）：
- 全局安装：
npm install -g spirit-cli - 准备图标：把所有 PNG/SVG（建议先转成 PNG，
spirit-cli不解析 SVG）放进一个文件夹，比如src/assets/icons/ - 执行命令：
spirit src/assets/icons/ - 输出位置：会在
src/assets/icons/spirit-cli/下生成sprite.png和sprite.css
注意：spirit 不会自动读取子目录，只处理指定路径下的**平级文件**；文件名不要含空格或中文，否则 CSS 类名会出错（例如 home icon.png → 生成类名为 .home-icon，但图片加载可能失败）。
如何让生成的 CSS 更好用？
spirit-cli 默认生成的 sprite.css 是类名 + background-position 形式，但直接用在项目里常遇到两个问题：
- 类名太长或不符合团队规范（如生成
.icon__arrow_right_24px）→ 改用--prefix参数：spirit src/assets/icons/ --prefix ic- - CSS 单位是
px，但项目用rem→ 目前不支持直接输出rem，需后处理：用 VSCode 的「替换」功能批量把background-position: (\d+)px (\d+)px替换为background-position: calc($1 / 16)rem calc($2 / 16)rem（假设根字号为 16px） - 没导出尺寸信息 → 若需动态计算宽高（比如适配高清屏），得手动加
data-width/data-height属性，spirit-cli不提供 JSON 元数据，这点不如Auto Sprite
VSCode 里怎么一键触发、避免重复执行？
别每次输命令。在项目根目录建 .vscode/tasks.json：
{
"version": "2.0.0",
"tasks": [
{
"label": "build:sprite",
"type": "shell",
"command": "spirit src/assets/icons/",
"group": "build",
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared",
"showReuseMessage": true
}
}
]
}
之后按 Ctrl + Shift + P → 输入 “Tasks: Run Task” → 选 build:sprite。关键点："panel": "shared" 让终端复用，避免每次开新窗口；如果图标目录变更，记得删掉 spirit-cli/ 文件夹再运行，否则 spirit-cli 不会覆盖旧图。
真正麻烦的不是生成，而是后续维护——比如新增图标后忘记重新跑命令，或者改了某个 PNG 尺寸却没同步更新 CSS 偏移。这类问题没法靠工具自动解决，得靠约定或加 Git hook 检查 sprite.png 和源图的修改时间戳是否匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
