用途:让设计资源保持有序、优化且可访问,核心原则是“有序的资源等于更快的开发”。资料给出的资源管理阶段包括:资源整理、图片优化、字体管理、资源版本控制、品牌资源库。
主要能力:1. 资源组织:按 images、icons、fonts、videos、logos、brand 等目录结构归类,并提供图片、图标、字体命名约定。2. 图片优化:通过 sharp、imagemin、imagemin-mozjpeg、imagemin-pngquant、imagemin-svgo 等工具压缩、转格式、按断点生成响应式图片。3. 字体优化:将 TTF/OTF 转为 WOFF2 与 WOFF,并用 font-display: swap 与 preload 加载。4. 版本控制:使用 Git LFS 跟踪 PSD、AI、Sketch、Figma、MP4、MOV 及大图;用脚本按 SHA-256 哈希记录资源版本。5. 品牌资源库:提供 brand 目录结构、品牌清单 manifest.ts、颜色与字体资源定义。
使用方式:安装依赖可运行 npm install sharp imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo;字体转换需 woff2_compress(brew install woff2)与 sfnt2woff;Git LFS 用 brew install git-lfs && git lfs install,并执行 git lfs track 相关命令。资料中 scripts/organize-assets.ts、scripts/optimize-images.ts、scripts/generate-responsive-images.ts 等脚本可按示例调用,但具体运行命令资料未提供。
适用场景与限制:适合前端或设计团队统一管理网站与品牌资源、压缩图片字体、生成响应式资源、跟踪大文件版本。限制:字体转换工具依赖系统安装的 woff2 与 sfnt2woff;Git LFS 需先初始化;资料只给出脚本示例,未提供完整 CLI、托管平台配置或收费信息。