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

时间:2022-12-31 00:27:33

Background

I have a directory of images, app/assets/images/sprites/flags/*.png that will be sprited. Compass, Sass, and Sprockets work together such that I can put

我有一个图像目录,app / assets / images / sprites / flags / * .png将被激活。指南针,Sass和链轮一起工作,我可以放

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

in my .scss file. By doing so, Compass generates the file app/assets/images/sprites/flags-abc123.png when I compile SCSS files.

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

Problem

I would like to precompile that flags-abc123.png file via a Rake task or shell command without compiling my .scss file. Is there a way to do so?

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

Rationale

Compiling all of the .scss files in the application is a lengthy part of the deploy process. We would like to speed up deploys by generating them on one machine and distributing them. Unfortunately, the other machines generate bad cache-busting URLs because they are missing the compiled sprite files. If we can precompile the sprite files, we can speed up deploys dramatically.

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

What I tried

I tried running bundle exec compass sprite app/assets/images/sprites/flags/*.png. That generates app/assets/stylesheets/_flags.scss, but doesn't generate app/assets/images/sprites/flags-abc123.png.

我尝试运行bundle exec指南针精灵app / assets / images / sprites / flags / * .png。这会生成app / assets / stylesheets / _flags.scss,但不会生成app / assets / images / sprites / flags-abc123.png。

1 个解决方案

#1


0  

I ended up making a Rake task:

我最终做了一个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

and using it like so:

并像这样使用它:

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

#1


0  

I ended up making a Rake task:

我最终做了一个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

and using it like so:

并像这样使用它:

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