rails 3.1 asset pipeline css caching in development - ruby-on-rails-3

I'm a bit confused as it seems like the application.css is including itself twice, once when it lists the resources from the manifest and then a cache of that. So when I delete an individual file it still seems to stay alive inside the application.css file.
application.css (source)
/*
*= require twitter/bootstrap
*= require_self
*= require_tree ./common
*= require_tree ./helpers
*/
Which works as expected and outputs in dev mode all the relevant individual files
development.rb
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
output
<link href="/assets/twitter/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/common/announcement.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/common/button.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<Blah blah>
application.css (output)
This should be blank? Since all I have in my application.css file is the manifest and no actual css but instead i get all my concatenated code 106kb long.
IE if I remove a file in the common directory, it doesn't go away. It is no longer listed in the output but the css still appears from the application.css

I had a problem like this before. It was caused after I had precompiled the assets it was going after the applcation.css inside the public folder as well as in the apps directory. I'm not sure how to fix it so that it doesn't keep happening while in dev mode but if you delete your /public/assets directory it should fix it.
Check and see if you have a public/assets folder, if you do and it's full, it's probably why you're seeing double.

There is currently (2012-09-24) a bug in rails/sprockets causing it to not properly detect imported files.
This should be fixed in rails 3.2.9 and later but in the mean time, you can work around it as follows:
Kill the rails instance
rm -rf tmp/cache
Start the rails instance
You should now be seeing the correct css.

You might want to look at
https://stackoverflow.com/a/7854902/686460
"Adding config.serve_static_assets = false to development.rb will prevent loading files from /public/assets"
That did it for me.

#Agustin's solution does it for me but here are a few things you need to do:
Delete everything in /tmp/cache/assets
Add config.serve_static_assets = false to development.rb or test.rb (credits to #Agustin)
Restart your server.
Make sure your application.js / .css is not cached in your browser. Go to http://localhost:3000/assets/application.js?body=1 and hit ctrl+f5 to force refresh (you can also try appending appending a randomizer param at the end: http://localhost:3000/assets/application.js?body=1&rnd=12343
If you get something else and ctrl+f5 still hasn't helped, you need to clear your browser's cache.
Skipping either of these steps returned a cached application.js / .css conflicting with my updates in single files.

The best way, that worked for me is to delete content of tmp/cache/* directory...

The thing that worked for us was setting 'config.assets.debug = false'
This no longer set the HTML included CSS as href="/assets/bootstrap-new.css?body=1", instead set it up as href="/assets/bootstrap-new.css", which I think was the issue.

I had the same problem. Despite clearing tmp/cache and public/assets the minified application.css was still cached and served up from somewhere and my changes to individual css files were not getting served.
This worked for me:
in application.css remove the line *= require_self
restart server
that seems to remove the cache and if you click on application.css in your browser source you will no longer see the minified version
replace the *= require_self back into the file and continue developing.

There was one last step required for me, but I got it fixed. Here's what I did:
shut down the rails server
rake assets:clean
rake tmp:clear
restart the rails server
Then, I refreshed my screen in Google Chrome, and IT STILL DID NOT WORK. So, I launched Firefox and voila, it was actually working. This means that Chrome was caching the old files within the browser. So, I then cleared out the browser cache in Chrome, and it worked!

I know this is an old question, but one fix that worked for me is that I had nginx proxying to my development environment and it had a location ~ ^/(assets)/ block in the configuration. Either comment it out, or try restarting nginx to invalidate the cache. If you're developing, you'll likely just want to comment it out entirely.
I lost way too much time troubleshooting this until I remembered that.

The assets do their job better when running the app in production environment then you'll have loading only the application.css with all the files included, and compressed, there to reduce the server request and this application.css with the compressed styles will be cached.
http://guides.rubyonrails.org/asset_pipeline.html

Related

Rails asset pipeline - image_path helper only working in development

I have a problem with asset preocompilation in Rails (3.2.7).
I am including an favicon like this:
<link rel="icon" type="image/png" href="<%= image_path("favicon.png") %>" />
On development mode I set config.assets.compile = true. There everything works fine, the rendered HTML looks like this:
<link rel="icon" type="image/png" href="/assets/favicon.png" />
But on production, where I set config.assets.compile = false, I get the error
Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Home#index
...
favicon.png isn't precompiled
I already ran rake assets:precompile and i can clearly see, that the asset is available under public/assets/favicon.png.
I know, that i could set config.assets.compile = true in production, but i don´t want to do that (because of performance reasons).
Has anyone an idea, why my rails app is not able to resolve the correct path to the asset in production? Thanks!
Update:
maybe also useful to know: It happens not only for images, also for other assets.
For example <%= stylesheet_link_tag "screen", :media => "all" %> also produces the error screen.css isn't precompiled when config.assets.compile is set to false.
You must tell Rails which assets are to be precompiled. You do this in config/application.rb or config/environments/production.rb with the config.assets.precompile config key.
Rails starts with a default list of assets to precompile, including ["application.js", "application.css"], but if you want your own assets to be precompiled too, you have to add them to the list.
For example:
# config/application.rb
module MyApp
class Application < Rails::Application
# other config ...
config.assets.precompile += ["screen.css", "*.png"]
end
end
Ok, after a couple of tries I figured out, how to fix this. Nevertheless it´s a little bit strange and does not satisfy me completely. It only worked for me, when I set digest to true and provide the path to the manifest:
config.assets.compile = false
config.assets.digest = true
config.assets.manifest = Rails.root.join("public/assets")
It would be interesting to know, what´s behind this "logic".

Rails Production Single JS File Isn't Precompiled?

So I have a file jquery.tmpl.min.js sitting under app/assets/javascripts/ and for whatever reason it's not being found in my production server. After runnings rake assets:precompile it completes without any errors whatsoever. All my other javascript assets get compiled properly and sent to the browser. I don't have any issues on my development server finding this JS file.
I have the following lines in my production.rb file:
config.serve_static_assets = true
config.assets.compile = true
config.assets.precompile += %w( *.js *.css )
Error message:
ActionController::RoutingError (No route matches [GET] "/assets/jquery.tmpl.min.js"):
Edit
According to this issue: https://github.com/rails/rails/issues/3596
Using the javascript_include_tag with something like 'jquery.ba-url.min' wont append the .js extension. Originally I had that but have since changed it to include the .js extension. Still no dice however.
Edit 2
I tried adding //= require jquery.tmpl.min.js to my application.js but now when I attempt to precompile my assets it says it can't find the file.
Edit 3
Tried adding //= require_tree and still it isn't found. This is driving me nuts!
Ok, I found the answer. It turns out Edit 2 was the fix that I was looking for. Problem was that I made the edit on development and commited to my production server using github. However I forgot to add the renamed file to the commit so all my commit ended up doing was deleting the file on the production server.

Rails 3.2 Asset Pipeline + html5shiv.JS in vendors/assets/javascript

After reading this post (recommended reading) about not using HTML5Shiv direct from source like (almost) everybody does, I'm trying to include the html5shiv.js in my app using Rails 3.2 Asset Pipeline.
I downloaded both minified and not-minified version of the javascript. The convention tells you to add third-party files into the vendors/assets folder. I have two questions now:
1) Which version (minified or not-minified) should I add to vendors/assets/javascrip folder?
2) Since it's a conditional reference <!--[if lt IE 9]>, how should I call the script?
I don't want to add it to the application.js manifest, because I want to keep it as a separate file and I want to use the condition. I'm kind of lost!
Any help would be very appreciated.
Thanks
You can use the unminified version of the JS if you like, Rails will compress it in production mode through the pipeline.
To keep the shiv as a separate file you can give it it's own manifest by creating a html5.js (or whatever) in your /vendor/assets/javascripts/ directory. In that file require the html5shiv (I assume the manifest and script are in the same dir).
//= require html5shiv
or
//= require html5shiv.min
And then include the manifest in your layout in the conditional block. In HAML something like:
== "<!--[if lt IE 9]>"
= javascript_include_tag 'html5'
== "<![endif]-->"
Remember to restart your app server before testing.
Or you may use directly
/[if lt IE 9]
%script{ src: "http://html5shim.googlecode.com/svn/trunk/html5.js", type: "text/javascript" }

How do I get jQuery Mobile precompiled for Rails 3 production?

I'm trying to deploy a Rails 3 app which includes jQuery Mobile. It works fine in development, and I understand that it needs to precompile the JS and CSS for production. I'm getting the following error:
Started GET "/orders/mobile" for 127.0.0.1 at Wed Jun 06 14:22:40 -0400 2012
Processing by OrdersController#mobile as HTML
Rendered orders/mobile.html.erb within layouts/mobile (642.9ms)
Completed 500 Internal Server Error in 1122ms
ActionView::Template::Error (jquery.mobile isn't precompiled):
5: <head>
6: <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
7: <title>Company Orders</title>
8: <%= stylesheet_link_tag 'jquery.mobile' %>
9: <%= stylesheet_link_tag 'jquery.mobile.structure' %>
10: <%= stylesheet_link_tag 'jquery.mobile.theme' %>
11: <%= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu' %>
app/views/layouts/mobile.html.erb:8:in `_app_views_layouts_mobile_html_erb__605278794_69818059003840'
app/controllers/orders_controller.rb:330:in `mobile'
app/controllers/orders_controller.rb:329:in `mobile'
I've read the usual stuff, but there are so many things wrong here, I hardly know where to start:
I had the JQM stuff in app/assets, but have since moved them to vendor/assets. They get seen by the precompiler -- I know because it will complain about them on various tries -- but they never seem to get precompiled (in either location).
I've tried *= require_tree ../../../vendor/assets/stylesheets in application.css. I don't really want it included in every page hit, so I'd like to include it in the layout, but I'm just trying to get it precompiled somehow.
I've tried *= require jquery.mobile[[.css].erb] in application.css.
I've tried config.assets.precompile += %w( [[./]vendor/assets/stylesheets/]jquery.mobile.* ) in config/environments/production.rb.
As a last-ditch effort, I've removed the ".erb" from jquery.mobile.css.erb, and removed the <% asset_data_uri %> tags to see if it would compile. It passes the rake assets:precompile command, but still gives me the same error.
I don't want to turn off precompiling for JQM; I want it to work. (I really need to speed this page up.) However, I can't find any guide on how to get JQM elegantly inserted into a Rails 3 app (with precompiling), and I've exhausted every avenue I can think of in trial and error. Surely someone has done this and knows the right way to go about it.
My fundamental problem here is that I need to have some assets precompiled for production, but NOT included in every page hit. Here's what I've figured out:
If I didn't mind JQM being served with every page, I could either put the files in app/assets and let require_tree . do its magic, or leave those files in vendor/assets, and require them individually in application.js. If I want to put them in vendor/assets and NOT specifically require them in application.js, I can use config.assets.paths << "#{Rails.root}/vendor/assets" in production.rb, and (apparently) require_tree in application.js will process this tree as well. This still rolls them up into the compiled application JS "ball," but leaves them distinct on the filesystem.
The proper way to incorporate jQuery Mobile for specific pages -- and keep its files separated in vendor/assets -- seems to be to use both a config.assets.paths << "#{Rails.root}/vendor/assets" directive and a config.assets.precompile += %w( jquery.mobile.* ) directive. This will get the JQM files precompiled, but NOT rolled up into application-(hash).js and application-(hash).css. (They'll be individual files in public/assets.) Then you can do specific javascript_include_tag's and stylesheet_link_tag's in a layout specially for mobile views.
Big finish: I had upgraded to Rails 3.2.5 because I saw some security report on 3.2.3. I rolled back to 3.2.3 and -- incorporating what I learned above -- I was able to finally get it working. I also tried 3.2.4. Apparently there's a regression in > 3.2.3 that interferes with precompiling.

Make asset pipeline act like production on development

I am experiencing some problems with assets on production: missing ones, stuff compiled into the wrong files (javascript for "/admin" getting compiled into the frontend code and so on). Most of the assets come from engines. I want to debug and optimize this.
For that, I need to precompile, serve and fail on my development environment just like it is done on production.
I have added some lines to my config/development.rb:
config.serve_static_assets = true
config.assets.precompile += %w( store/all.js store/all.css admin/all.js admin/all.css ) # #TODO: clean up, and optimize.
config.assets.compile = false
Running this with rake RAILS_GROUPS=assets RAILS_ENV=development assets:precompile gives me all the assets and the manifest.yml in public/.
But then the server fails:
Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Spree/home#index
Showing /xxxx/app/views/spree/shared/_head.html.erb where line #13 raised:
favicon.ico isn't precompiled
favicon.ico isn't precompiled. But it is! Its there, in the public dir, in manifest.yml, and I can fetch it with the browser (or wget): http://localhost:3000/assets/favicon.ico.
NOTE Favicon is simply the first asset called. If I strip out favicon, the problem simply surfaces with the next asset, being "all.js", or, when that is stripped, "all.css", and so on. I can strip it untill "footer_bg.png", and it will then fail there. Again: the problem is not favicon, but the fact that the development environment does not see the precompiled assets at all.
What more is needed to get development asset pipeline similar to production?
EDIT: More explicit explanation that favicon is not the problem, merely a symptom.
I ended up installing an apache, passenger on localhost to troubleshoot.
Apache (could probably be any passenger-able server) because of the static asset serving.
Furthermore, on localhost I can bump the verbosity of apache in its logs very high, offering me enough debug information.
Passenger to emulate the ruby version and the gem-loading as much as possible as on production.
Running on webrick is just too different, even when emulating as close as possible, it proved too different from a production stack; which is why I could not reproduce the production problems in there,
Firing up the whole stack as if it were production allowed me to troubleshoot. Which lead me to conclude that several problems were causing the asset-woes: a gems assets not being picked up; a permission issue (compiled assets not readable by www-data) and a few assets not being compiled properly.
I think you may want to leave favicon.ico in public...
alzabo0:~ $ rails --version
Rails 3.2.3
alzabo0:~ $ rails new ojoijoijo
[...]
create public/404.html
create public/422.html
create public/500.html
create public/favicon.ico
create public/index.html
create public/robots.txt
[...]
Just a guess, but try adding to your precompile list:
config.assets.precompile += %w( store/all.js store/all.css admin/all.js admin/all.css favicon.ico)