为什么我的 rails 资产管道中的 js 文件没有被编译？答案

【问题标题】：Why are js files in my rails asset pipeline not being compiled?为什么我的 rails 资产管道中的 js 文件没有被编译？
【发布时间】：2013-08-03 00:41:34
【问题描述】：

我遇到了与此问题类似的问题： Rails asset pipeline not including required files in application.js manifest 但是，这个问题已经结束了，所以我重新问了一遍，但要说明我的具体情况。）

环境：

Ruby 2.0.0、Rails 3.2.8、OSX 10.7.5、Chrome 28.0.1500.95

我遇到的主要问题

放置在“/app/assets/javascripts”中的文件似乎没有编译到或出现在“/public/assets”中

一个例子

如果我在 app/assets/javascripts 中放置一个文件，例如这个 test.js 文件：

  alert("Hello!");

然后在我的应用程序中重新加载页面，应该会出现此警报。（我正在复制 Ryan Bates 在他的 Railscast on the Asset Pipeline 中在 ~6:30 的视频中所做的事情）但是，没有出现任何警报。

调试尝试

我做了一些测试来尝试调试它。

（如下@Aidan 推荐的）如果我“rm -rf public/assets”，那么将“javascript_include_tag 'test'”添加到我的布局中，警报确实出现。但是，可能因为我是n00b，我不知道那是怎么回事帮助我调试问题。
如果我将 //= require_test 添加到 app/javascripts/application.js 到我的清单文件，这不会导致出现警报。

我的清单文件 (app/javascripts/application.js)

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
// removed /sitewide from require_tree
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .

我的 application.rb 文件

 # Enable the asset pipeline
 config.assets.enabled = true

“y Rails.application.config.assets.paths”的 Rails 控制台输出

"/Users/Anders/Dropbox/dev/suggestion-box-app/app/assets/images",
 "/Users/Anders/Dropbox/dev/suggestion-box-app/app/assets/javascripts",
 "/Users/Anders/Dropbox/dev/suggestion-box-app/app/assets/stylesheets",
 "/Users/Anders/.rvm/gems/ruby-2.0.0-p195@suggestion-box-app/gems/coffee-rails-3.2.2/lib/assets/javascripts",
 "/Users/Anders/.rvm/gems/ruby-2.0.0-p195@suggestion-box-app/gems/jquery-rails-3.0.4/vendor/assets/javascripts"

我的视图/布局/application.html.haml 文件

!!! 5
%html
  %head
    %meta{:charset => "utf-8"}/
    %meta{:content => "width=device-width", :name => "viewport"}/
    %meta{:content => "yes", :name => "apple-mobile-web-app-capable"}/
    %title My App
    %script{:type=>"text/javascript", :src=>"//use.typekit.net/wjb6ybj.js"}
    :javascript
      try{Typekit.load();}catch(e){}
    = stylesheet_link_tag "screen", :media => "all"
    = csrf_meta_tags
    = javascript_include_tag "application"
  %body
    #container
      = render "layouts/flashes"
      = yield
      = render "layouts/footer"

来源来自在 localhost:3000 中查看的应用页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width' name='viewport'>
    <meta content='yes' name='apple-mobile-web-app-capable'>
    <title>My app</title>
    <script src='//use.typekit.net/wjb6ybj.js' type='text/javascript'></script>
    <script>
      try{Typekit.load();}catch(e){}
    </script>
    <link href="/assets/screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="FqMtH+rs6or9HRx+RL4bWpQyLTNPM8BKLrcf/xZknP8=" name="csrf-token" />
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
  </head>
  <body>
    <div id='container'>
      ....
    </div>
  </body>
</html>

查看“localhost:3000/assets/application.js”时看到的内容

    /*!
 * jQuery JavaScript Library v1.9.1
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 *
 * Copyright 2005, 2012 jQuery Foundation, Inc. and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2013-2-4
 */
(function(e,t){function P(e){var t=e.length,n=b.type(e);return b.isWindow(e)?!1:e.nodeType===1&&t?!0:n==="array"||n!=="function"&&(t===0||typeof t=="number"&&t>0&&t-1 in e)}function B(e){var t=H[e]={};return b.each(e.match(E)||[],function(e,n){t[n]=!0}),t}function I(e,n,r,i){if(!b.acceptData(e))return;var s,o,u=b.expando,a=typeof n=="string",f=e.nodeType,c=f?

[...排除 jquery 的剩余部分]

我应该在这里看不到 test.js 文件吗？

关于问题可能是什么的任何建议？我可以提供任何其他信息来帮助调试此问题吗？感谢您的帮助！

【问题讨论】：

public/assets/application.js 中有文件吗？运行 rake assets:clean 以确保您没有这样做。
我试过这个，但没有任何影响。
尝试一些操作，以确保它可以找到该文件：1) rm -rf public/assets，2) 从 application.js 中删除 jquery 和 jquery_ujs，以及 3) 添加 @987654336 @ 到你的布局。
@AidanFeldman - 感谢您的建议。我完成了以上所有操作，在页面刷新时，“你好！”现在出现警报（！）
K，那很好...现在倒着走，看看问题出在哪里！我想这是第 1 步。

标签： javascript ruby-on-rails asset-pipeline

【解决方案1】：

Rails 将编译config.assets.precompile 中列出的所有目标。这些目标将编译为public/assets/。该配置项已经包含"application.js" 和其他一些目标，因此您需要将要预编译的任何其他目标添加到public/assets/。为任何特定目标编译的源文件是根据目标名称自动计算的；例如，test.js 的目标将从 app/assets/javascripts/test.js 或 app/assets/javascripts/test.js.coffee 编译，以存在者为准。

【讨论】：

也许我问错了问题。我只是希望我放置在 assets/javascripts 中的 JS 文件可以在 public/assets 中访问。我的理解是，这应该通过包含 //= require_tree 来处理。在清单文件中。所以我想我不明白你的答案。你能不能换个方式解释一下？
@andersr 您似乎很清楚 test.js 应该包含在您的 application.js 文件中的 require_tree . 行中。 @yfeldblum 的回答在这里并不重要；您无需修改 config.assets.precompile 即可将 test.js 包含在您的 application.js 文件中。您在开发中应该看到的是包含在您的=require_tree . 行中的每个.js 文件依赖项作为单独的<script> 标记添加到您的布局的HTML 源代码中。这些标签之一应该是你的test.js文件。
以上评论假设您 a) 在:development，b) 拥有config.assets.debug = true，并且c) 在布局中包含您的脚本标签<%= javascript_include_tag "application" %>
@Deefour 感谢您的澄清。是的，我正在开发中，并且我的视图中有 javascript 包含标记。我在上面添加了确切的标记供您参考。但是，我没有 config.assets.debug = true。那会放在 /config/application.rb 中吗？
通常是config/environments/development.rb。

【解决方案2】：

问题似乎与我的 rails/gem 版本有关。从 Rails 3.2.8 更新到 Rails 3.2.14（还需要将 rack gem 从 1.4.1 更新到 1.4.5）后，问题得到解决，并且 assets/javascripts 中的项目现在正在编译/添加到 public/assets。请注意，我为此创建了一个全新的 gemset，因此该问题可能与 Rails 版本无关，只是需要重新创建“损坏”的 gem set。

【讨论】：