AutoSprite 技术文档

1. 安装指南

在开始使用 AutoSprite 之前，您需要按照以下步骤进行安装：

1. 安装 RMagick 和 auto_sprite gems：

   gem install RMagick auto_sprite
   

2. 编辑您的 environment.rb 文件，添加以下代码：

   config.gem "auto_sprite"
   

2. 项目使用说明

AutoSprite 是一个自动化 CSS 图像精灵创建工具，它可以帮助您将多个图像合并为单个图像，并通过 CSS 显示所需的图像部分，以此加快页面加载速度。

使用步骤：

1. 在布局中包含样式表：

   <%= stylesheet_link_tag "auto_sprite" %>
   

2. 在您的 public/images 目录下创建一个名为 sprites 的文件夹。

3. 将您想要链接的图像放入 public/images/sprites 目录中。

4. 如常使用图像标签：

   <%= image_tag 'sprites/icon1.jpg' %>
   

   如果需要，可以添加 :title 属性以显示工具提示：

   <%= image_tag "sprites/stuff.png", :title => "我喜欢冰淇淋" %>
   

5. 添加新图像到 sprites/ 目录后，重新加载页面，享受更快渲染的网站。

3. 项目API使用文档

AutoSprite 的主要功能是自动化处理图像精灵的生成，不需要手动编写 API 调用，因此没有特定的 API 文档。它通过检查 CSS 或精灵文件是否过时或缺失来自动生成所需的文件。

4. 项目安装方式

项目的安装方式已在“安装指南”部分详细说明。您需要通过命令行安装所需的 gems，并在 Rails 配置文件中添加相应的配置项。

---

注意：

• 不支持动画图像。
• RMagick 支持的任何图像格式都应该可以工作。
• 混合尺寸的图像不是问题。
• 即使移除 AutoSprite，您的应用程序仍然可以正常工作。

当 Rails 启动时，会检查 CSS 或精灵文件是否需要更新。如果需要，它会自动生成以下文件：

RAILS_ROOT/public/stylesheets/auto_sprite.css
RAILS_ROOT/public/images/auto_sprite.png

图像标签会自动为精灵目录中的图像生成 div 标签，例如：

<span class="_as_logo_png"></span> 而不是 <img src="/images/sprites/logo.png" />

生成的样式表示例：

._as_face3_png {
   background-position:0 0px;
   height:16px;
   width:16px;
}

._as_face4_png {
  background-position:0 -16px;
  height:16px;
  width:16px;
}

._as_face3_png, 
._as_face3_png {
  display:inline-block;
  background-image:url('/images/auto_sprite.png');
  background-repeat:no-repeat; 
}