把一堆图标合并成一张图：spritesmith 的完整上手路径

把一堆图标合并成一张图spritesmith 的完整上手路径【免费下载链接】spritesmithUtility that takes sprites and converts them into a stylesheet and its coordinates项目地址: https://gitcode.com/gh_mirrors/sp/spritesmith管理后台有 137 个小图标每次打开页面浏览器就要发出 137 个图片请求。spritesmith 是一个 Node.js 精灵图合并工具给它一组小图它自动输出一张精灵图大图外加每个小图在大图中的坐标映射拿到坐标后你只需要写 CSS 的 background-position。它是什么解决谁的什么麻烦spritesmith 是一个 Node.js 库读取一组图标文件合并成一张精灵图大图同时返回每个小图在大图中的 x、y、宽、高。它面向想把多张小图合一做进构建流程、又不想手算坐标的前端开发者和 CI 流水线。请求数从 N 变 1几百个小图标变成 1 次图片加载首屏握手开销直接省掉大头布局全自动5 种排列算法可选不用人肉对齐像素输出是纯数据坐标就是 JSON任何模板引擎都能拿去做样式 工作原理一次讲透核心流程就在主源码 src/smith.js 里一共四步像把一把零钱归到同一个信封读图图像引擎逐张读入小图取出宽和高摆位布局算法计算每张小图在大画布上的位置默认 binary-tree 算法把画布反复对半切分直到恰好放完所有小图空间利用率最高渲染按算好的位置把小图画进画布产出一张新的大图交付返回大图、坐标映射、大图尺寸三样东西坐标以文件路径为键直接可被样式代码消费 核心能力清单维度说明输入本地图片路径数组或 gulp 的 Vinyl 流对象输出大图Buffer 或可读流、坐标 JSON、大图宽高布局算法top-down、left-right、diagonal、alt-diagonal、binary-tree默认利用率最高图间距padding 参数控制小图之间的空隙防止透明图边缘互相污染图像引擎默认纯 JS 的 pixelsmith可换 canvassmithCairo速度最快100 张以上图标推荐或 gmsmithImageMagick可调导出质量格式支持PNG、JPG、GIF、BMP 等常见位图TIFF 等冷门格式需换 gmsmith 处理集成方式官方提供 grunt、gulp 插件和 CLI也可作为库嵌进任意 Node 构建任务 3 个真实使用场景图标上百的管理后台以前用设计工具手工拼接再人工数像素写坐标现在合并成 1 张大图、坐标自动生成请求数从 137 降到 1图标经常改版的项目产品每周换一批图标以前要人重新拼图、再逐条修 CSS现在构建时跑一遍脚本坐标 JSON 随构建自动更新半透明图标互相渗透多个透明底图标拼进一张图后边缘容易渗色加 padding: 2 留出 2px 间隙裁切出来干净利落⚖️ 和同类工具怎么选要自己控制布局算法、图像引擎、输出形式并把合并嵌进自己的构建流水线选 spritesmith 这类基础库只想要一条命令直接吐出 CSS不在乎内部机制带 CSS 模板的一站式工具更省事——spritesmith 本身只产出大图加坐标样式部分需要自己用模板渲染项目已深度使用 webpack 且图标很少用内置的资产处理方案即可不必再加一层 上手第一步最短路径是装依赖加 3 行代码var Spritesmith require(spritesmith); Spritesmith.run({src: [a.png, b.png, c.png]}, function (err, result) { // result.image 是大图 Bufferresult.coordinates 是坐标映射 });先用 3 张图跑通确认产物再接进构建任务。如果你的项目里小图标多、构建链是 Node.js 生态spritesmith 值得接进来它只做多合一 坐标这一件事边界清晰、好集成反之若你图省事想要一站式出样式再考虑打包型工具。仓库里的 src-test/ 保留了多种布局的输入和期望输出核对结果时可以直接参照。【免费下载链接】spritesmithUtility that takes sprites and converts them into a stylesheet and its coordinates项目地址: https://gitcode.com/gh_mirrors/sp/spritesmith创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考