Question

背景

我有一个图像目录，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，因为它们缺少已编译的精灵文件。如果我们可以预编译精灵文件，我们可以加速部署。

我尝试了什么

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

Answer 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

如何使用Compass生成sprited图像文件？

背景

问题

原理

我尝试了什么

1 个答案: