I ran into an issue in my Rails 4 app while trying to organize JS files &quot;the rails way&quot;. They were previously scattered across different views. I organized them into separate files and compile them with the assets pipeline. However, I just learned that jQuery&#39;s &quot;ready&quot; event doesn&#39;t fire on subsequent clicks when turbo-linking is turned on. The first time you load a page it works. But when you click a link, anything inside the `ready( function($) {` won&#39;t get executed (because the page doesn&#39;t actually load again). Good explanation: [here][1].

So my question is: What is the right way to ensure that jQuery events work properly while turbo-links are on? Do you wrap the scripts in a Rails-specific listener? Or maybe rails has some magic that makes it unnecessary? The docs are a bit vague on how this should work, especially with respect to loading multiple files via the manifest(s) like application.js.


  [1]: https://stackoverflow.com/questions/18769109/rails-4-turbo-link-error-uncaught-typeerror-cannot-read-property-position-of/18770219?noredirect=1#18770219

Rails 4: how to use $(document).ready() with turbo-links

To my understanding, all of your JavaScript gets merged into 1 file. Rails does this by default when it adds `//= require_tree .` to the bottom of your `application.js` manifest file. 

This sounds like a real life-saver, but I am a little concerned about page-specific JavaScript code. Does this code get executed on every page? The last thing I want is for all of my objects to be instantiated for every page when they are only needed on 1 page. 

Also, isn&#39;t there potential for code that clashes too?

Or do you put a small `script` tag at the bottom of the page that just calls into a method that executes the javascript code for the page?

Do you no longer need require.js then?

Thanks

**EDIT**: I appreciate all the answers... and I don&#39;t think they are really getting at the problem. Some of them are about styling and don&#39;t seem to relate... and others just mention `javascript_include_tag`... which I know exists (obviously...) but it would appear that the Rails 3.1 way going forward is to wrap up all of your JavaScript into 1 file rather than loading individual JavaScript at the bottom of each page.

The best solution I can come up with is to wrap certain features in `div` tags with `id`s or `class`es. In the JavaScript code, you just check if the `id` or `class` is on the page, and if it is, you run the JavaScript code that is associated with it. This way if the dynamic element is not on the page, the JavaScript code doesn&#39;t run - even though it&#39;s been included in the massive `application.js` file packaged by Sprockets.

My above solution has the benefit that if a search box is included on 8 of the 100 pages, it will run on only those 8 pages. You also won&#39;t have to include the same code on 8 of the pages on the site. In fact, you&#39;ll never have to include manual script tags on your site anywhere ever again.

I think this is the actual answer to my question.

Using Rails 3.1, where do you put your &quot;page specific&quot; JavaScript code?

Sprockets tends to be quite verbose in the (dev) log by default under Ruby on Rails 3.1 (RC1):

    Started GET &quot;/assets/application.css&quot; for 127.0.0.1 at 2011-06-10 17:30:45 -0400
    Compiled app/assets/stylesheets/application.css.scss  (5ms)  (pid 6303)


    Started GET &quot;/assets/application.js&quot; for 127.0.0.1 at 2011-06-10 17:30:45 -0400
    Compiled app/assets/stylesheets/default.css.scss  (15ms)  (pid 6303)

    ...
    Started GET &quot;/assets/default/header_bg.gif&quot; for 127.0.0.1 at 2011-06-10 17:30:45 -0400
    Served asset /default/header_logo.gif - 304 Not Modified  (7ms)  (pid 6303)
    Served asset /default/header_bg.gif - 304 Not Modified  (0ms)  (pid 6246)
    Served asset /default/footer_bg.gif - 304 Not Modified  (49ms)  (pid 6236)
    ...

I&#39;d like to either reduce the level of verbosity or disable it altogether.

I&#39;m assuming there is a clean way to disable or reduce the verbosity of the logging by adding a config line in either `environment.rb` or `development.rb` similar to `    config.active_record.logger = nil` which silences ActiveRecord SQL statements.



How can I disable logging of asset pipeline (sprockets) messages in Ruby on Rails 3.1?

I have some fonts being configured in my Scss file like so:

    @font-face {
      font-family: &#39;Icomoon&#39;;
      src: asset-url(&#39;icoMoon.eot?#iefix&#39;, font) format(&#39;embedded-opentype&#39;),
           asset-url(&#39;icoMoon.woff&#39;, font) format(&#39;woff&#39;),
           asset-url(&#39;icoMoon.ttf&#39;, font)  format(&#39;truetype&#39;),
           asset-url(&#39;icoMoon.svg#Icomoon&#39;, font) format(&#39;svg&#39;);
    }

The actual font file are stored in /app/assets/fonts/&lt;filename.ext&gt;

I have added `config.assets.paths &lt;&lt; Rails.root.join(&quot;app&quot;, &quot;assets&quot;, &quot;fonts&quot;)` to my application.rb file

and the compile CSS source is as follows:

    @font-face {
      font-family: &#39;Icomoon&#39;;
      src: url(/assets/icoMoon.eot?#iefix) format(&quot;embedded-opentype&quot;), url(/assets/icoMoon.woff) format(&quot;woff&quot;), url(/assets/icoMoon.ttf) format(&quot;truetype&quot;), url(/assets/icoMoon.svg#Icomoon) format(&quot;svg&quot;);
    }

But when I run the app the font files are not being found. The logs:

&gt; Started GET &quot;/assets/icoMoon.ttf&quot; for 127.0.0.1 at 2012-06-05 23:21:17 +0100
&gt; Served asset /icoMoon.ttf - 404 Not Found (13ms)

Why isn&#39;t the asset pipeline flattening the font files down into just /assets?

Any ideas people?

Kind regards,
Neil


**Extra info:**

When checking the rails console for assets paths and assetprecompile I get the following:

    1.9.2p320 :001 &gt; y Rails.application.config.assets.precompile
    ---
    - !ruby/object:Proc {}
    - !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
    - .svg
    - .eot
    - .woff
    - .ttf
    =&gt; nil



    1.9.2p320 :002 &gt; y Rails.application.config.assets.paths
    ---
    - /Users/neiltonge/code/neiltonge/app/assets/fonts
    - /Users/neiltonge/code/neiltonge/app/assets/images
    - /Users/neiltonge/code/neiltonge/app/assets/javascripts
    - /Users/neiltonge/code/neiltonge/app/assets/stylesheets
    - /Users/neiltonge/code/neiltonge/vendor/assets/images
    - /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
    - /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
    - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
    - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
    - /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
    - !ruby/object:Pathname
      path: /Users/neiltonge/code/neiltonge/app/assets/fonts
     =&gt; nil

Using fonts with Rails asset pipeline

I made a basic rails app with a simple pages controller with an index function and when I load the page I get:


    ActionView::Template::Error (application.css isn&#39;t precompiled):
        2: &lt;html&gt;
        3: &lt;head&gt;
        4:   &lt;title&gt;Demo&lt;/title&gt;
        5:   &lt;%= stylesheet_link_tag    &quot;application&quot; %&gt;
        6:   &lt;%= javascript_include_tag &quot;application&quot; %&gt;
        7:   &lt;%= csrf_meta_tags %&gt;
        8: &lt;/head&gt;
      app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__43625033_88530400&#39;


Gemfile

    source &#39;http://rubygems.org&#39;
    
    gem &#39;rails&#39;, &#39;3.1.0&#39;
    
    # Bundle edge Rails instead:
    # gem &#39;rails&#39;,     :git =&gt; &#39;git://github.com/rails/rails.git&#39;
    
    gem &#39;sqlite3&#39;
    
    gem &#39;execjs&#39;
    gem &#39;therubyracer&#39;
    
    # Gems used only for assets and not required
    # in production environments by default.
    group :assets do
      gem &#39;sass-rails&#39;, &quot;  ~&gt; 3.1.0&quot;
      gem &#39;coffee-rails&#39;, &quot;~&gt; 3.1.0&quot;
      gem &#39;uglifier&#39;
    end
    
    gem &#39;jquery-rails&#39;
    
    # Use unicorn as the web server
    # gem &#39;unicorn&#39;
    
    # Deploy with Capistrano
    # gem &#39;capistrano&#39;
    
    # To use debugger
    # gem &#39;ruby-debug19&#39;, :require =&gt; &#39;ruby-debug&#39;
    
    group :test do
      # Pretty printed test output
      gem &#39;turn&#39;, :require =&gt; false
    end



rails 3.1.0 ActionView::Template::Error (application.css isn&#39;t precompiled)

The default Rails app installed by `rails new` has `config.assets.compile = false` in production. 

And the ordinary way to do things is to run `rake assets:precompile` before deploying your app, to make sure all asset pipeline assets are compiled. 

So what happens if I set `config.assets.compile = true` in production?

I wont&#39; need to run `precompile` anymore. What I _believe_ will happen is the first time an asset is requested, it will be compiled. This will be a performance hit that first time (and it means you generally need a js runtime in production to do it).  But other than these downsides, after the asset was lazily compiled, I _think_ all subsequent access to that asset will have _no_ performance hit, the app&#39;s performance will be _exactly the same_ as with precompiled assets after this initial first-hit lazy compilation. **is this true?**

Is there anything I&#39;m missing? Any other reasons not to set `config.assets.compile = true` in production?  If I&#39;ve got a JS runtime in production, and am willing to take the tradeoff of degraded performance for the _first_ access of an asset, in return for not having to run `precompile`, does this make sense?

config.assets.compile=true in Rails production, why not?

I am doing assets pre-compile, and running the application in production mode. After compilation when I load the my index page I got followings warnings in the chrome console:

    Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
    prospects:1 OTS parsing error: invalid version tag
    Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
    prospects:1 OTS parsing error: invalid version tag

**The issue is its not loading icons instead of that its showing squares**.

we used the custom fonts and the code is:

    @font-face {
	  font-family: &#39;icomoon&#39;;
	  src: font-url(&#39;icomoon.eot&#39;);
	  src: font-url(&#39;icomoon.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),
		   font-url(&#39;icomoon.ttf&#39;) format(&#39;truetype&#39;),
		   font-url(&#39;icomoon.woff&#39;) format(&#39;woff&#39;),
		   font-url(&#39;icomoon.svg#icomoon&#39;) format(&#39;svg&#39;);
	  font-weight: normal;
	  font-style: normal;
    }
I don&#39;t know what is missing from my end . I searched a lot and also tried solution but not got any success.In development mode its working fine but don&#39;t know why its showing square in the production mode.

Failed to decode downloaded font, OTS parsing error: invalid version tag + rails 4

I’m in the process of building my first solo Rails app using Rails 3.1.rc5. My problem is that I want to have my site render the various CSS files conditionally. I’m using Blueprint CSS and I’m trying to have sprockets/rails render `screen.css` most of the time, `print.css` only when printing, and `ie.css` only when the site is accessed from Internet Explorer.

Unfortunately, the default `*= require_tree` command in the `application.css` manifest includes everything in the `assets/stylesheets` directory and results in an unpleasant CSS jumble. My current workaround is a sort of brute-force method where I specify everything individually:

In application.css:

    *= require_self
    *= require home.css
    ...
    *= require blueprint/screen.css

In my stylesheets partial (haml):

    &lt;!--[if lt IE 9]
    &lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;
    ![endif]--&gt;
    = stylesheet_link_tag &quot;application&quot;
    = stylesheet_link_tag &#39;blueprint/print&#39;, media: &#39;print&#39;
    &lt;!--[if lt IE8]]
    = stylesheet_link_tag &#39;blueprint/ie&#39;
    ![endif]--&gt;
    = javascript_include_tag &quot;application&quot;

This works but it’s not especially pretty. I’ve done a few hours of searching to even get this far but I’m hoping that there’s some easier way to do it that I’ve just missed. If I could even selectively render certain directories (without including subdirectories) it would make the whole process a lot less rigid.

Thanks!

    

Using Rails 3.1 assets pipeline to conditionally use certain css

I have a Rails app that I&#39;m trying to test in the production environment. I ran `RAILS_ENV=production rake assets:precompile` which generated all of my assets in /public/assets. The problem is that when I start my app w/ `RAILS_ENV=production rails s thin` I get:

    ActionController::RoutingError (No route matches [GET] &quot;/assets/application-eff78fd67423795a7be3aa21512f0bd2.css&quot;):

This file does exist though at `/public/assets/application-eff78fd67423795a7be3aa21512f0bd2.css`. 

Any thoughts as to why I&#39;m getting this `RoutingError`?

No route matches [GET] /assets

I&#39;m trying to put my app into production and image and css asset paths aren&#39;t working.

Here&#39;s what I&#39;m currently doing:

 - Image assets live in /app/assets/images/image.jpg 
 - Stylesheets live in /app/assets/stylesheets/style.css
 - In my layout, I reference the css file like this: `&lt;%= stylesheet_link_tag    &quot;styles&quot;, media: &quot;all&quot;, &quot;data-turbolinks-track&quot; =&gt; true %&gt;`
 - Before restarting unicorn, I run `RAILS_ENV=production bundle exec rake assets:precompile` and it succeeds and I see the fingerprinted files in the `public/assets` directory.

When I browse to my site, I get a 404 not found error for `mysite.com/stylesheets/styles.css`. 

What am I doing wrong?


**Update:**
In my layout, it looks like this:

	&lt;%= stylesheet_link_tag    &quot;bootstrap.min&quot;, media: &quot;all&quot;, &quot;data-turbolinks-track&quot; =&gt; true %&gt;
	&lt;%= stylesheet_link_tag    &quot;styles&quot;, media: &quot;all&quot;, &quot;data-turbolinks-track&quot; =&gt; true %&gt;
	&lt;%= javascript_include_tag &quot;application&quot;, &quot;data-turbolinks-track&quot; =&gt; true %&gt;

The generate source is this:

    &lt;link data-turbolinks-track=&quot;true&quot; href=&quot;/stylesheets/bootstrap.min.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;link data-turbolinks-track=&quot;true&quot; href=&quot;/stylesheets/styles.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;script data-turbolinks-track=&quot;true&quot; src=&quot;/assets/application-0c647c942c6eff10ad92f1f2b0c64efe.js&quot;&gt;&lt;/script&gt;

Looks like Rails is not properly looking for the compiled css files. But it&#39;s very confusing *why* it&#39;s working correctly for javascripts (notice the `/assets/****.js` path).

  [1]: http://edgeguides.rubyonrails.org/asset_pipeline.html


Rails 4: assets not loading in production

**UPDATE:** [Colin][1]&#39;s suggestion of removing the line //= require_tree . has fixed the issue.

I have wasted over 2 days trying to follow every suggestion out there and fix my issue. I am trying to follow the http://ruby.railstutorial.org book on windows machine and cannot for the life of me get past the following nasty error.

    ExecJS::RuntimeError in Static_pages#home

    Showing C:/Users/.../bootcamp-sample-app/app/views/layouts/application.html.erb where line #6 raised:

    [&quot;ok&quot;,&quot;(function() {\n\n\n\n}).call(this);\n&quot;]
    (in C:/Users/.../bootcamp-sample-app/app/assets/javascripts/sessions.js.coffee)
    Extracted source (around line #6):

    3: &lt;head&gt;
    4:   &lt;title&gt;&lt;%= full_title(yield(:title)) %&gt;&lt;/title&gt;
    5:   &lt;%= stylesheet_link_tag    &quot;application&quot;, media: &quot;all&quot; %&gt;
    6:   &lt;%= javascript_include_tag &quot;application&quot; %&gt;
    7:   &lt;%= csrf_meta_tags %&gt;
    8:   &lt;%= render &#39;layouts/shim&#39; %&gt;
    9: &lt;/head&gt;
    Rails.root: C:/Users/.../bootcamp-sample-app

    Application Trace | Framework Trace | Full Trace
    app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb___487732698_30422172&#39;
    Request


I have tried every suggestion including installing nodejs with the msi, using execjs 1.3.0 and other things which I can&#39;t even remember any more. Here is the **gem file** 

    source &#39;https://rubygems.org&#39;
    
    gem &#39;rails&#39;, &#39;3.2.8&#39;
    gem &#39;bootstrap-sass&#39;, &#39;2.0.0&#39;
    gem &#39;bcrypt-ruby&#39;, &#39;3.0.1&#39;
    gem &#39;faker&#39;, &#39;1.0.1&#39;
    gem &#39;will_paginate&#39;, &#39;3.0.3&#39;
    gem &#39;bootstrap-will_paginate&#39;, &#39;0.0.6&#39;
    
    group :development, :test do
      gem &#39;sqlite3&#39;, &#39;1.3.5&#39;
      gem &#39;rspec-rails&#39;, &#39;2.10.0&#39;
      gem &#39;guard-rspec&#39;, &#39;0.5.5&#39;
      gem &#39;guard-cucumber&#39;
    end
    
    group :development do
      gem &#39;annotate&#39;, &#39;2.5.0&#39;
    end
    
    
    # Gems used only for assets and not required
    # in production environments by default.
    group :assets do
      gem &#39;sass-rails&#39;
      gem &#39;coffee-rails&#39;
      gem &#39;coffee-script&#39;
      gem &#39;uglifier&#39;
    end
    
    gem &#39;jquery-rails&#39;, &#39;2.0.2&#39;
    
    gem &#39;execjs&#39;
    
    # Gems on Linus/Mac
    #gem &#39;therubyracer&#39;
    
    
    group :test do
      gem &#39;capybara&#39;, &#39;1.1.2&#39;
      gem &#39;guard-spork&#39;, &#39;0.3.2&#39;
      gem &#39;spork&#39;, &#39;0.9.0&#39;
      gem &#39;factory_girl_rails&#39;, &#39;1.4.0&#39;
      gem &#39;cucumber-rails&#39;, &#39;1.2.1&#39;, require: false
      gem &#39;database_cleaner&#39;, &#39;0.7.0&#39;
    
    
    # Test gems on Linux
    #  gem &#39;rb-inotify&#39;, &#39;0.8.8&#39;
    #  gem &#39;libnotify&#39;, &#39;0.5.9&#39;
    
    # Test gems on Macintosh OS X
    #  gem &#39;selenium-webdriver&#39;, &#39;~&gt; 2.22.0&#39;
    #  gem &#39;rb-fsevent&#39;, &#39;0.9.1&#39;, :require =&gt; false
    #  gem &#39;growl&#39;, &#39;1.0.3&#39;
    
    # Test gems on Windows
    # gem &#39;rb-fchange&#39;, &#39;0.0.5&#39;
    # gem &#39;rb-notifu&#39;, &#39;0.0.4&#39;
    # gem &#39;win32console&#39;, &#39;1.3.0&#39;
    end
    
    group :production do
    #  gem &#39;therubyracer&#39;
      gem &#39;pg&#39;, &#39;0.12.2&#39;
    end
    
    # To use ActiveModel has_secure_password
    # gem &#39;bcrypt-ruby&#39;, &#39;~&gt; 3.0.0&#39;
    
    # To use Jbuilder templates for JSON
    # gem &#39;jbuilder&#39;
    
    # Use unicorn as the app server
    # gem &#39;unicorn&#39;
    
    # Deploy with Capistrano
    # gem &#39;capistrano&#39;
    
    # To use debugger
    #gem &#39;debugger&#39;&#39;

and here is the **sessions.js.coffee**

    # Place all the behaviors and hooks related to the matching controller here.
    # All this logic will automatically be available in application.js.
    # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

**application.js**

    // This is a manifest file that&#39;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&#39;s not advisable to add code directly here, but if you do, it&#39;ll appear at the bottom of the
    // the compiled file.
    //
    // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT&#39;S TO BE PROCESSED, ANY BLANK LINE SHOULD
    // GO AFTER THE REQUIRES BELOW.
    //
    //= require jquery
    //= require jquery_ujs
    //= require_tree .
    //= require bootstrap

**application.html.erb**

    &lt;!DOCTYPE html&gt;
     &lt;html&gt;
     &lt;head&gt;
       &lt;title&gt;&lt;%= full_title(yield(:title)) %&gt;&lt;/title&gt;
       &lt;%= stylesheet_link_tag    &quot;application&quot;, media: &quot;all&quot; %&gt;
       &lt;%= javascript_include_tag &quot;application&quot; %&gt;
       &lt;%= csrf_meta_tags %&gt;
       &lt;%= render &#39;layouts/shim&#39; %&gt;
     &lt;/head&gt;
     &lt;body&gt;
     &lt;%= render &#39;layouts/header&#39; %&gt;
     &lt;div class=&quot;container&quot;&gt;
       &lt;%= yield %&gt;
       &lt;%= render &#39;layouts/footer&#39; %&gt;
     &lt;/div&gt;
     &lt;/body&gt;
     &lt;/html&gt;

Here is **console content**

    Processing by StaticPagesController#home as HTML
      Rendered static_pages/home.html.erb within layouts/application (45.0ms)
    Completed 500 Internal Server Error in 1136ms

    ActionView::Template::Error ([&quot;ok&quot;,&quot;(function() {\n\n\n\n}).call(this);\n&quot;]
      (in C:/Users/.../bootcamp-sample-app/app/assets/javascripts/sessions.js.coffee)):
        3: &lt;head&gt;
        4:   &lt;title&gt;&lt;%= full_title(yield(:title)) %&gt;&lt;/title&gt;
        5:   &lt;%= stylesheet_link_tag    &quot;application&quot;, media: &quot;all&quot; %&gt;
        6:   &lt;%= javascript_include_tag &quot;application&quot; %&gt;
        7:   &lt;%= csrf_meta_tags %&gt;
        8:   &lt;%= render &#39;layouts/shim&#39; %&gt;
        9: &lt;/head&gt;
      app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb___487732698_30422172&#39;


      Rendered C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/actionpack-3.2.8/lib/action_dispatch/middleware/templates/rescues/_trace.erb (2.0ms)
      Rendered C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/actionpack-3.2.8/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (1.0ms)
      Rendered C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/actionpack-3.2.8/lib/action_dispatch/middleware/templates/rescues/template_error.erb within rescues/layout (34.0ms)


I have installed Devkit and have tried various gems but please suggest changes which can help me develop on windows. I used rubyinstaller for everything.

What am I missing?


  [1]: https://stackoverflow.com/users/1017768/colin-r

ExecJS::RuntimeError on Windows trying to follow rubytutorial

Are we supposed to use something else aside from `image-url` and others in Rails 4? They return different values that don&#39;t seem to make sense. If I have `logo.png` in `/app/assets/images/logo.png` and I do the following, this is what I get:

    image-url(&quot;logo.png&quot;) -&gt; url(&quot;/images/logo.png&quot;) #obviously doesn&#39;t work
    image-path(&quot;logo.png&quot;) -&gt; &quot;/images/logo.png&quot;
    asset-url(&quot;logo.png&quot;) -&gt; url(&quot;/logo.png&quot;)

Of course none of these work because they need at least `/assets` in front.

***UPDATE***: Actually, I just noticed, how do I access images in Rails 4? I have an image at `/app/assets/images/logo.png`. But if I go to any of the following URLs, I still don&#39;t see my image:

    http://localhost:3000/assets/logo.png
    http://localhost:3000/assets/images/logo.png
    http://localhost:3000/logo.png
    http://localhost:3000/images/logo.png

***UPDATE 2***: The only way I can bring up my `logo.png` is by moving it into the `/app/assets/stylesheets` directory and then pulling up:

    http://localhost:3000/assets/logo.png

Rails 4 image-path, image-url and asset-url no longer work in SCSS files

In Rails 3, gems used exclusively to generate assets in the asset pipeline were properly placed in the `assets` group of the Gemfile:

    ...

    # Gems used only for assets and not required
    # in production environments by default.
    group :assets do
      gem &#39;sass-rails&#39;
      gem &#39;coffee-rails&#39;
      gem &#39;uglifier&#39;
  
      # See https://github.com/sstephenson/execjs#readme for more supported runtimes
      # gem &#39;therubyracer&#39;, :platforms =&gt; :ruby
    end

Now, according to the (still in progress) [upgrade documentation](http://edgeguides.rubyonrails.org/upgrading_ruby_on_rails.html#upgrading-from-rails-3-2-to-rails-4-0):

&gt; Rails 4.0 removed the assets group from Gemfile. You&#39;d need to remove that line from your Gemfile when upgrading.

Sure enough, making a new project with RC1 yields a Gemfile with asset-related gems included by default outside of any group:

    source &#39;https://rubygems.org&#39;

    # Bundle edge Rails instead: gem &#39;rails&#39;, github: &#39;rails/rails&#39;
    gem &#39;rails&#39;, &#39;4.0.0.rc1&#39;

    # Use sqlite3 as the database for Active Record
    gem &#39;sqlite3&#39;

    # Use SCSS for stylesheets
    gem &#39;sass-rails&#39;, &#39;~&gt; 4.0.0.rc1&#39;

    # Use Uglifier as compressor for JavaScript assets
    gem &#39;uglifier&#39;, &#39;&gt;= 1.3.0&#39;

    # Use CoffeeScript for .js.coffee assets and views
    gem &#39;coffee-rails&#39;, &#39;~&gt; 4.0.0&#39;

    # See https://github.com/sstephenson/execjs#readme for more supported runtimes
    # gem &#39;therubyracer&#39;, platforms: :ruby

    ...

Does this mean these gems will now be bundled in production builds by default? If so, why the change of heart? Is Rails 4 moving towards the dynamic generation of assets in production?

Why did Rails4 drop support for &quot;assets&quot; group in the Gemfile

So, I have an `app/assets/stylesheets/` directory structure that looks something like this:

       |-dialogs
       |-mixins
       |---buttons
       |---gradients
       |---vendor_support
       |---widgets
       |-pages
       |-structure
       |-ui_elements

In each directory, there are multiple sass partials (usually *.css.scss, but one or two *.css.scss.erb).

I might be assuming a lot, but rails SHOULD automatically compile all the files in those directories because of `*= require_tree .` in application.css, right?

I recently have tried restructuring these files by removing all color variables and placing them in a file in the root `app/assets/stylesheets` folder (_colors.css.scss). I then created a file in the root `app/assets/stylesheets` folder called master.css.scss which looks like this:

    // Color Palette 
    @import &quot;colors&quot;;
    
    // Mixins
    @import &quot;mixins/buttons/standard_button&quot;;
    @import &quot;mixins/gradients/table_header_fade&quot;;
    @import &quot;mixins/vendor_support/rounded_corners&quot;;
    @import &quot;mixins/vendor_support/rounded_corners_top&quot;;
    @import &quot;mixins/vendor_support/box_shadow&quot;;
    @import &quot;mixins/vendor_support/opacity&quot;;

I don&#39;t really understand how rails handles the order of asset compilation, but it&#39;s obviously not in my favor. It appears none of the files realize they have any variables or mixins being imported, and so it throws errors and I can&#39;t compile. 

    Undefined variable: &quot;$dialog_divider_color&quot;.
      (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

    Undefined mixin &#39;rounded_corners&#39;.
      (in /home/blah/app/assets/stylesheets/widgets.css.scss)

The variable `$dialog_divider_color` is clearly defined in _colors.css.scss, and `_master.css.scss` is importing colors and all my mixins. But apparently rails didn&#39;t get that memo.

Is there some way I can fix these errors, or will I need to resort to putting all my variable definitions back into each individual file, as well as all the mixin imports?

Unfortunately, [this guy][1] doesn&#39;t seem to think it&#39;s possible, but I&#39;m hoping he&#39;s wrong. Any thoughts are greatly appreciated.


  [1]: https://stackoverflow.com/questions/8887824/persisting-scss-variables-in-rails-asset-pipeline

Proper SCSS Asset Structure in Rails

Does anyone know how to add another folder to the asset pipeline in Rails 3.1?

I&#39;d like to serve `app/assets/fonts` the same way `app/assets/images` is served.

- - - - -
**Update: 5-7-2013**

Just to add some clarification for future people who find this question to explicitly add an asset path, in your application.rb file:

    config.assets.paths &lt;&lt; &quot;#{Rails.root}/app/assets/fonts&quot;

However, since the above path is under `app/assets` you don&#39;t have to add it explicitly, you just need to restart your rails app so Sprockets can pick it up.

You will have to explicitly add paths that are outside of `app/assets`,`lib/assets`, or `vendor/assets`, and just remember that while Sprockets picks up new files in folders that were present when your application loaded, in my experience it does not pick up new folders in the asset paths without a restart.

Add a new asset path in Rails 3.1

Everything goes well in local machine with assets pipeline in Rails 4 and Ruby 2.0. But when deploying to heroku, it is shown that:

    -----&gt; Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       I, [2013-03-12T03:28:29.908234 #912]  INFO -- : Writing /tmp/build_1n6yi8lwna3sj/public/assets/rails-2ee5a98f26fbf8c6c461127da73c47eb.png
       I, [2013-03-12T03:28:29.914096 #912]  INFO -- : Writing /tmp/build_1n6yi8lwna3sj/public/assets/trash-3c3c2861eca3747315d712bcfc182902.png
       I, [2013-03-12T03:28:33.963234 #912]  INFO -- : Writing /tmp/build_1n6yi8lwna3sj/public/assets/application-bf2525bd32aa2a7068dbcfaa591b3874.js
       I, [2013-03-12T03:28:40.362850 #912]  INFO -- : Writing /tmp/build_1n6yi8lwna3sj/public/assets/application-13374a65f29a3b4cea6f8da2816ce7ff.css
       Asset precompilation completed (14.36s)

Heroku seems to compile files but put it in /tmp without any errors. My questions are:

 1. How come Heroku compile assets files to /tmp?
 2. My last solution was to run RAILS_ENV=production bundle exec rake assets:precompile locally, but this generated a manifest-xxxxxx.json in public/assets, rather than manifest.yml, so that heroku doesn&#39;t detect the JSON manifest file. I sorted it out by manually created a yml from the json file and heroku became happy. Has heroku&#39;s approach been outdated?

 

Heroku does NOT compile files under assets pipelines in Rails 4

If I generate a new controller in Rails 3.1, also a javascript file with the name of the controller will added automatically. Firstly, I thought this javascript file will used only, when the related controller is called.

By default there is the instruction `//= require_tree .` in the `application.js`-file, that include every javascript file on it&#39;s tree.

How could I load only the controller specific script?

Rails 3.1 asset pipeline: how to load controller-specific scripts?

Is there any way to use a Rails helper method, more specifically, a path helper method within a javascript asset file. This file `foo.js.coffee.erb`

    $(&#39;#bar&#39;).val(&quot;&lt;%= create_post_path %&gt;&quot;)

I would love it if I could get from erubis

    $(&#39;#bar&#39;).val(&quot;path/to/create&quot;)

Using a Rails helper method within a javascript asset

What are the ways that you can speed up the Rails Asset Pipeline precompile process?

How can you speed up the Rails Asset Pipeline precompile process?

I have a Rails 4 application and I am trying to use a custom font.

I have followed many tutorials on this and somehow it&#39;s just not working for my application.

I am using `application.css.less` and have the following declaration:

    @font-face {
        font-family: &#39;HDVPeace&#39;;
        src: font-url(&#39;HDV_Peace.eot&#39;);
        src: font-url(&#39;HDV_Peace.eot?iefix&#39;) format(&#39;eot&#39;),
            font-url(&#39;HDV_Peace.woff&#39;) format(&#39;woff&#39;),
            font-url(&#39;HDV_Peace.ttf&#39;) format(&#39;truetype&#39;),
            font-url(&#39;HDV_Peace.svg#webfont&#39;) format(&#39;svg&#39;);
    }

*Note: I have tried using* `url()` *instead of* `font-url()` *also. The former generates 404 errors on the console, where the latter just doesn&#39;t seem to do anything at all. In the chrome dev tools under resources, the font files are not appearing under the* `assets` *folder, or anywhere*

in my `config/application.rb` I have:

    config.assets.paths &lt;&lt; Rails.root.join(&#39;app&#39;, &#39;assets&#39;, &#39;fonts&#39;)

And in both my `config/environments/development.rb` and `config/environments/production.rb` I have:

    config.assets.paths &lt;&lt; Rails.root.join(&#39;app&#39;, &#39;assets&#39;, &#39;fonts&#39;)
    config.assets.precompile += %w( .svg .eot .woff .ttf)

My font files are located at `app/assets/fonts` and are not contained in a folder below that...

What am I missing?

**UPDATE:**

folder structure
    
    app
    └── assets
        └── fonts
            ├── HDV_Peace.eot
            ├── HDV_Peace.svg
            ├── HDV_Peace.ttf
            └── HDV_Peace.woff

How to use fonts in Rails 4

Could somebody explain to me what the command `rake assets:clean` really does? Unfortunately the Rails Guides dont mention it. There is also the command `rake assets:cleanup`. Whats the difference?

Furthermore could somebody tell me when do I have to run `rake assets:precompile` in production. Do I run it on the server console after I deployed all my application files to my production server? Or do I `precompile` on my local machine and then do a deploy of all files?

Thanks all

Confusion about rake assets:clean / cleanup on the asset pipeline in rails

How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.

If I were to set them both like this: `{max-width:100px;max-width:20%;}` the asset pipeline would simply choose the second one and ignore the first one.

How to set a max-width as percent AND pixels?

My deployments are slow, they take at least 3 minutes. The slow Capistrano task during deploy is assets:precompile. This takes probably 99% of the total deploy time. How can I speed this up? Should I precompile my assets on my local machine and add them to my git repo?

Edit: Adding `config.assets.initialize_on_precompile = false` to my application.rb file dropped the precompile time with half a minute, but it is still slow.

Speed up assets:precompile with Rails 3.1/3.2 Capistrano deployment

I&#39;m using rails 4 &amp; ruby 1.9.3 for my application and `fancybox2-rails` gem, but there&#39;s a general problem with asset pipeline. If I run `rake task` for precompile, then everything is fine except for images in `vendor/assets/images` and `../gems/ruby-1.9.3-p327/gems/fancybox2-rails-0.2.1/vendor/assets/images`. Images from these two folders are not being precompiled and eventually I have a problem with dead links to non-existing images. Any suggestions?

rails 4 asset pipeline vendor assets images are not being precompiled

I&#39;m starting a new project in Rails, and it looks like the application.js manifest file is doing something funny with the javascripts that I reference - does it cache those files as part of the asset pipeline?

Here&#39;s what happened. I added a javascript file named jquery.autoresize.js to the vendor/assets/javascripts folder, and then referenced the file in the application.js manifest like this: 

    //= require jquery.autoresize.js 

Then I started up the rails server. But after navigating around in my app, I realized that I had accidentally added the wrong version of the jquery.autoresize.js file. So, I deleted that file and then added the correct version to the vendor/assets/javascripts folder. But, to my horror, when I reloaded the page, it is still loading the old javascript file. 

I tried emptying my browser cache, then exiting and restarting the Rails server, but to no avail. I hacked a solution together by simply renaming my javascript file and referencing the new name, which worked fine. But there has got to be a better solution to this. 

Does the new asset pipeline cache the files you reference somehow? If so, how can I clear that cache? Thanks for any help!

Clear the cache from the Rails asset pipeline

The problem is exactly what the heading says. The javaScript is in the asset pipeline i.e assets/javascripts/myfile.js.coffee In the application.js I have:

    //= require jquery
    //= require jquery_ujs
    //= require turbolinks
    //= require jquery.ui.all
    //= requier twitter/bootstrap
    //= require jasny-bootstrap
    //= require_tree .

This is the coffeescript

    $(document).ready -&gt;
      $(&quot;#close&quot;).click -&gt;
        $(this).parent().parent().slideUp(&quot;slow&quot;)
  


  
      $( &quot;#datepicker&quot; ).datepicker
        dateFormat : &quot;yy-mm-dd&quot;
    

      player_count = $(&quot;#player option&quot;).length


      $(&#39;#btn-add&#39;).click -&gt;
        $(&#39;#users option:selected&#39;).each -&gt;
          if player_count &gt;= 8
            $(&#39;#select-reserve&#39;).append(&quot;&lt;option      value=&#39;&quot;+$(this).val()+&quot;&#39;&gt;&quot;+$(this).text()+&quot;&lt;/option&gt;&quot;)
            $(this).remove()    
          else
            $(&#39;#player&#39;).append(&quot;&lt;option value=&#39;&quot;+$(this).val()+&quot;&#39;&gt;&quot;+$(this).text()+&quot;&lt;/option&gt;&quot;)
            $(this).remove()
            player_count++
    

      $(&#39;#btn-remove&#39;).click -&gt;
        $(&#39;#player option:selected&#39;).each -&gt;
          $(&#39;#users&#39;).append(&quot;&lt;option value=&#39;&quot;+$(this).val()+&quot;&#39;&gt;&quot;+$(this).text()+&quot;&lt;/option&gt;&quot;)
          $(this).remove()
          player_count--
   

      $(&#39;#btn-remove-reserve&#39;).click -&gt;
        $(&#39;#select-reserve option:selected&#39;).each -&gt;
          $(&#39;#users&#39;).append(&quot;&lt;option value=&#39;&quot;+$(this).val()+&quot;&#39;&gt;&quot;+$(this).text()+&quot;&lt;/option&gt;&quot;)
          $(this).remove()
   

      $(&quot;#submit&quot;).click -&gt;
       $(&quot;select option&quot;).prop(&quot;selected&quot;, &quot;selected&quot;)
 
I can see in the source code on the browser that the javaScript has been loaded, but it only works after I reload the page.



Rails javascript only works after reload

I prefer *not* to concatenate JavaScript files in development mode, but serve them as individual files. So I configured:

development.rb:

    config.assets.compress = false
    config.assets.debug = true
    config.assets.compile = true

In my /app/assets/javascript directory I have:

- reviews.js
- reviews/
  - foo.js
  - bar.js

reviews.js:

    //= require jquery
    //= require jquery_ujs
    //= require_tree ./reviews


I include the JavaScript using `&lt;%= javascript_include_tag &quot;reviews&quot; %&gt;` in my layout. The generated page correctly references the three scripts individually and `reviews.js` is essentially empty. So far so good.

Now when I precompile my assets for production using `rake assets:precompile` the three JavaScript files are concatenated into `reviews.js`. This is all fine for production but now, *in development mode*, the concatenated `reviews.js` is served **in addition** to the two individual files.

Of course, this leads to all kinds of nasty bugs when developing because now, the content of `foo.js` and `bar.js` is served twice, one of them in a potentially older version in `reviews.js`.

How can I make sure Rails doesn&#39;t use the precompiled assets in development mode?

How to avoid precompiled assets being served in development mode?

I&#39;ve been transitioning an app to Rails 3.1 (and now on to 3.2) and watched the [Railscast on the asset pipeline][1]. I moved all of my third-party jquery plugin files to the /vendor/assets/javascripts/ directory. In my /app/assets/javascripts/application.js I have the following:

    //= require jquery
    //= require jquery_ujs
    //= require_tree .
    //= require_self

I realized the `require_tree .` call only loads the tree for the /app/assets/javascripts/ directory. (Is that correct?) What&#39;s the best way to include *all* the &quot;vendor&quot; javascripts? (I&#39;m not worried about ordering at this point.) Of course I could require them line by line in /app/assets/javascripts/application.js. My other thought was to create /vendor/assets/javascripts/vendor_javascripts.js with the following:

    //= require_tree .

And then in /app/assets/javascripts/application.js add the following:

    //= require vendor_javascripts

This seems a little clunky though. Is there a better way to automatically include all the &quot;vendor&quot; (and/or &quot;lib&quot;) javascripts? 

PS. I saw [this about index.js files][2], but I would potentially end up with multiple files named index.js, right? Oh, and I tried restarting my server throughout.


  [1]: http://railscasts.com/episodes/279-understanding-the-asset-pipeline
  [2]: http://guides.rubyonrails.org/asset_pipeline.html#using-index-files

Rails asset pipeline: Standard way for including all /vendor/assets/javascripts/?

This was asked in another question, but none of the solutions appear to work for me in 3.1rc1.

I&#39;m trying to use the new assets stuff in rails 3.1 - I have the files: 

    ./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
    ./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js

I then added: 

    //= require jquery-ui to app/assets/javascripts/application.js
    *= require jquery-ui to app/assets/stylesheets/application.css

The jquery-ui javascript file loads just fine, but the css file says:

    Sprockets::FileNotFound (couldn&#39;t find file &#39;jquery-ui&#39;
         (in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):

Any ideas?

Rails 3.1 and jquery-ui assets

I am trying to convert an existing app to the new 3.1 asset pipeline layout, and want to include a lot of vendor files that have to be in a specific order, (underscore.js and backbone being one pair). As such, I can&#39;t just use a &lt;code&gt;= require_tree .&lt;/code&gt; to pull in my vendor files, (without renaming each file with a prefix. Yuck).

The following is within my &lt;code&gt;app/assets/javascripts/application.js&lt;/code&gt; file:

&lt;pre&gt;
//= require modernizr-1.7
//= require jquery-1.6.1
//= require underscore-1.1.5
//= require backbone-0.3.3
//= require_tree .
&lt;/pre&gt;

I have tried every combination of with/out extensions, with/out the require_tree and with/out the relative paths, and nothing works. All of my vendor files are in &lt;code&gt;/vendor/assets/javascripts/&lt;/code&gt;.

I feel like I am being stupid because this seems like such an obvious use case, (including specific files by name in an order is common with JS, no?) that I must be doing something idiotic?

Rails 3.1 asset pipeline and manually ordered Javascript requires

Is there a built-in way to determine if an asset exists without resorting to `File.exists?(File.join(Rails.root, &quot;foo&quot;, &quot;bar&quot;, &quot;baz&quot;))` and that looks through the asset paths.

My app goes and fetches images from a remote server on a Resque queue; until we have the image downloaded I want to serve a placeholder image.  Currently I&#39;m using `File.exists`... but this means hard-coding a path, which sucks, or looking through the configured asset paths.  It seems like this should be there already, but I can&#39;t find it in the docs.


All Asset Pipeline Solutions on Gang of Coders

Total of 31 Asset Pipeline Solutions