Question

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

我认为我在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

my config.ru

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

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

 // require_tree

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

我已经安装了所有宝石，但是在加载页面时仍有多个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>

Answer 1

我认为你最好使用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 folder中。还有与Guard连接的缩小库，然后我使用Sinatra Static Assets或Sinatra Exstatic *指向视图/布局中的文件。我不喜欢将javascript合并到一个文件（YMMV）中。

我还想通过jquery-rails添加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 Static Assets的一个分支。这是最近的一个分支，如果您使用它，欢迎任何反馈：）

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

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

sinatra应用程序中的资产管道

1 个答案:

变通方法