代码之家  ›  专栏  ›  技术社区  ›  brad

在CSS中跟踪图像的时间戳

  •  10
  • brad  · 技术社区  · 15 年前

    所以轨道时间戳很好。我正在使用它向所有以10位时间戳结尾的文件添加Expires头文件。但是,我的大多数图像都在我的CSS中引用。是否有人遇到过允许将时间戳添加到CSS引用的图像中的方法,或者实现这一点的某种奇怪的重写规则?我希望我的站点中的所有图像,包括内联图像和CSS图像都有这个时间戳,这样我就可以告诉浏览器缓存它们,但只要文件本身发生更改,就刷新它们。

    我在网上找不到关于这个的任何东西,我也不相信这是一个更经常讨论的话题。

    我认为我的设置不重要,因为实际到期时间 有希望地 以同样的方式发生,基于10位时间戳,但是我使用Apache来服务所有静态内容,如果这很重要的话。

    4 回复  |  直到 11 年前
        1
  •  4
  •   Les Nightingill    15 年前

    您可以通过如下方式获取文件修改时间来附加每个图像文件的实际时间戳:

        source.gsub!(/url\((['"]*)(.+)(['"]*)\)/) do
          open, file, close = $1, $2, $3
          css_dir = File.join(RAILS_ROOT,"public/stylesheets")
          timestamp = ''
          FileUtils.cd(css_dir) do 
            if file =~ /^\// # absolute path
              f = File.new(RAILS_ROOT + "/public" + file)
            else # relative path
              f = File.new(file)
            end
            timestamp = f.mtime.to_i.to_s
          end
    
          if file =~ /.\.(ico|css|js|gif|jpe?g|png)/
            "url(#{open}#{file}?#{timestamp}#{close})"
          else
            "url(#{open}#{file}#{close})"
          end
        end
    

    (也许有更优雅的方式来写这个,我的红宝石排骨还是很弱!) 但是现在黑客越来越丑了…你会认为会有一种更像Rails的方法来实现这一点。

        2
  •  5
  •   Ben Crouse    15 年前

    我一直在使用 asset packager 最后我编辑了插件 compress_css 解决这个问题的方法。我基本上只是在CSS中对图像进行regex,并插入当前时间戳:

    timestamp = Time.now.to_s.gsub(/\D/, '')
    source.gsub!(/url\((['"])(.+)(['"])\)/) do
      open, file, close = $1, $2, $3
      if file =~ /.\.(ico|css|js|gif|jpe?g|png)/
        "url(#{open}#{file}?#{timestamp}#{close})"
      else
        "url(#{open}#{file}#{close})"
      end
    end
    

    这样,每当我部署时,压缩的CSS图像都包含附加的时间戳。这个方法的缺点是每个图像都没有自己的时间戳,所以每次部署新的CSS时,所有的CSS图像都是“过期”的。除非经常部署CSS,否则总比什么都不部署要好。

        3
  •  3
  •   lamplighter    15 年前

    最好的解决方案似乎是使用erb来生成样式表,这样您就可以使用Rails图像帮助器而不是直接的图像路径。也就是说,去掉公共的/stylesheets/application.css文件,创建app/views/stylesheets/application.css.erb。您还必须创建一个控制器,启用缓存,并设置路由。

    以下是详细信息: http://deaddeadgood.com/2009/9/28/far-future-expires-headers-for-css-images-in-rails

        4
  •  3
  •   brad    15 年前

    如果有人偶然发现了这一点,杰米特现在支持这个现成的。我在一个新项目中使用了jammit,我印象非常深刻!

    推荐文章