如何使用 Compass 生成精灵图像文件？答案

【问题标题】：How do I generate a sprited image file with Compass?如何使用 Compass 生成精灵图像文件？
【发布时间】：2014-01-01 15:51:21
【问题描述】：

背景

我有一个图像目录，app/assets/images/sprites/flags/*.png，它将被精灵化。 Compass、Sass 和 Sprockets 一起工作，这样我就可以放置

@import "sprites/flags/*.png";
...
.flag.en {
  @include flags-sprite(en)
}

在我的.scss 文件中。这样，Compass 会在我编译 SCSS 文件时生成文件app/assets/images/sprites/flags-abc123.png。

问题

我想通过 Rake 任务或 shell 命令预编译 flags-abc123.png 文件而不编译我的 .scss 文件。有办法吗？

基本原理

编译应用程序中的所有.scss 文件是部署过程中很长的一部分。我们希望通过在一台机器上生成并分发它们来加速部署。不幸的是，其他机器会生成错误的缓存破坏 URL，因为它们缺少已编译的 sprite 文件。如果我们可以预编译 sprite 文件，我们可以显着加快部署速度。

我尝试了什么

我尝试运行bundle exec compass sprite app/assets/images/sprites/flags/*.png。这会生成app/assets/stylesheets/_flags.scss，但不会生成app/assets/images/sprites/flags-abc123.png。

【问题讨论】：

你能添加你的 compass 项目的 config.rb 吗？

标签： ruby sass compass-sass css-sprites

【解决方案1】：

我最终做了一个 Rake 任务：

class SpriteTask
  include Rake::DSL

  attr_reader :file_task

  def initialize(glob)
    @glob = glob
    build_compass_sprite_map
    define_task
  end

  private

  attr_reader :glob, :map

  def build_compass_sprite_map
    uri = Sass::Script::String.new(glob)
    context = Object.new
    kwargs = {}
    kwargs.extend Compass::SassExtensions::Functions::Sprites::VariableReader
    @map = Compass::SassExtensions::Sprites::SpriteMap.from_uri uri, context, kwargs
    @map.options = {}
  end

  def define_task
    @file_task = file(map.filename => map.image_filenames) do |task|
      map.generate
    end
  end
end

并像这样使用它：

require 'sprite_task'
namespace :sprites do
  task :generate do
    SpriteTask.new('foo/*.png').file_task.invoke
    SpriteTask.new('bar/*.png').file_task.invoke
  end
end

【讨论】：