3

我一直在尝试按照指南在 sinatra 应用程序中设置资产管道，目的是在加载我的网页时减少我的 http 请求。该指南位于此处

我认为我在 sinatra 应用程序中创建模块时遇到了挫折，如果这是基本的但以前没有这样做过，我深表歉意。

所以我创建了一个名为 modules 的文件夹并在其中放置了一个 assets.rb 文件。我已经修改了脚本以满足我的需要

class Assets < Sinatra::Base
  configure do
    set :assets, (Sprockets::Environment.new { |env|
      env.append_path(settings.root + "/assets/js")
      env.append_path(settings.root + "/assets/css")

      # compress everything in production
      if ENV["RACK_ENV"] == "development || production"
        env.js_compressor  = YUI::JavaScriptCompressor.new
        env.css_compressor = YUI::CssCompressor.new
      end
    })
  end

  get "/assets/js/app.js" do
   content_type("application/javascript")
   settings.assets["app.js"]
  end

  get "/assets/css/app.css" do
   content_type("text/css")
   settings.assets["app.css"]
  end
end

我的资产目录结构

assets
  css
    app.css
    other.css
  js
    app.js
    other.js

我的 config.ru

require './david'
use Assets
run Sinatra::Application

在我的每一个 app.js 和 app.css 中，我都放了

 // require_tree

但是在我的 js 文件中它是灰色的，而在 css 中它仍然是白色的？

我已经安装了所需的两个 gem，但是在加载页面时仍然有多个 http 请求，而不是将所有 css 和 js 分组为一个调用

任何人都可以看到我缺少的任何东西，主要是我猜测的模块设置吗？

谢谢

编辑

我当前的布局文件

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>David's Carpets</title>

 <!--stylesheets-->
 <%= stylesheet_link_tag "/assets/css/font-awesome.min.css" %>
 <!--[if IE 7]>
 <link rel="stylesheet" href="/assets/css/font-awesome-ie7.min.css">
 <![endif]-->    
 <%= stylesheet_link_tag "/assets/css/bootstrap.min.css" %>
 <%= stylesheet_link_tag "/assets/css/bootstrap-responsive.min.css" %>
 <%= stylesheet_link_tag "/assets/css/custom.min.css" %>
 <%= stylesheet_link_tag "/assets/css/resp-980.min.css" %>


 </head>
 <body onload="initialize()">
 <%= styled_flash %>


 <%= yield %>
 <%= erb :footer %>


<!-- Javascript -->
<script src="/assets/js/jquery-1.7-min.js" type="text/javascript"></script>
<script src="/assets/js/valid_mail.min.js" type="text/javascript"></script>
<script src="/assets/js/twitter.min.js" type="text/javascript"></script>
<script src="/assets/js/custom.min.js" type="text/javascript"></script>


</body>
</html>
4

1 回答 1

3

我认为您最好使用 proc 添加根路径：

set :assets, Proc.new { Sprockets::Environment.new(root) {|env|
  env.append_path File.join( root, "/assets/js")
  env.append_path File.join(root, "/assets/css")
  # more…
}}

看看这是否能改善情况。您可能想使用Pry或只是warn检查 的值settings.assets["app.js"]是否是您期望的值。

解决方法

就像我在上面的评论中所说的那样，事情并不总是从一个框架很好地映射到另一个框架。就个人而言，我使用Guard/SASS和Guard/Coffeescript将我的资产预编译到public 文件夹中。还有一些缩小库与Guard连接，然后使用Sinatra Static Assets或Sinatra Exstatic * 指向视图/布局中的文件。我不喜欢将 javascript 合并到一个文件 (YMMV) 中。

我还想要 Rails 通过 jquery-rails 添加的 jQuery 内容，所以我编写了rack-jquery、rack-jquery_ui和rack-jquery_ui-themes。您可能对它们感兴趣。

另一种让 Sprockets 为您工作的方法是使用 Rack。我发现这篇博文向您展示了如何：

http://metabates.com/2011/08/31/using-sprockets-without-rails/

  • 我还写了 Sinatra Exstatic，它是 Sinatra 静态资产的一个分支。这是最近的一个分支，如果您使用它，欢迎任何反馈:)

另外，现在模板已发布在问题中：

Sinatra 不会为您做任何魔术来指向“超级”css/js 文件，因此如果您有多个 CSS 和 javascript 链接，那么客户端仍会向各个文件发出多个请求。解决这个问题的一种方法是（在 JS 的情况下）只有一个语句，例如：

<!-- Javascript -->
<script src="/assets/js/app.js" type="text/javascript"></script>

就是这样。另一种方法是保留您拥有的所有语句，但使用路由捕获每个语句，例如：

  # The local variable `name` isn't used below
  # but just in case you ever need it, it's there
  get "/assets/js/:name.js" do |name|
   content_type :javascript
   settings.assets["app.js"]
  end
于 2013-05-29T15:01:10.297 回答