Generate page with inline JS and CSS with Rails - assets

I'm using Rails 3.1. My JavaScript and CSS files are included in usual way:
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
Now I want to create standalone version of existing page with default layout. I want it to be a single html file that user can download and use in offline. So, JavaScript and CSS code must be included in content of this file. How can I do this?

You can create a separate CSS and JS and include them in config.assets.precompile key in the file config/application.rb.
Check this link

Related

Asset was not declared to be precompiled in production (Rails 5.0.0.1)

I am new to Rails 5.0.0.1
I followed the guidelines in http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets:
You can also opt to include controller specific stylesheets and JavaScript files only in their respective controllers using the following:
<%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>
When doing this, ensure you are not using the require_tree directive, as that will result in your assets being included more than once.
I generated some scaffolds (which also generated the assets -- .coffee and .scss)
When I do rails s and access one of the scaffold's main page, it generated an error:
Asset was not declared to be precompiled in production.
Add Rails.application.config.assets.precompile += %w( myscaffold.css ) to config/initializers/assets.rb and restart your server
I do as it said, and it worked, but is there any other way to simplify this process?
I wish that I can generate some other scaffolds or controllers with their assets without doing any more concern of adding new lines inside the config/initializers/assets.rb.
I will receive any other alternatives too.
you just try this..
check your Gemfile gem 'sprockets-rails', '2.3.3'
And bundle install
Navigate files
config/initializers/assets.rb
Then add
Rails.application.config.assets.precompile += %w( your_file_name.scss )
Restart server

Javascripts not precompiled?

in my app/assets/javascripts/specific.js I have
//= require_tree ./specific
in app/assets/javascripts/specific/chat I have pusher.js
Also, in config/environments/production I have
config.assets.precompile += %w( specific.js some_other_manifest.js )
However, when I go into production (on heroku) it still complains pusher.js is not precompiled. What am I doing wrong here?
While the application is deployed, the javascript files seem to be compiled.
from Heroku logs:
Compiled specific/chat/pusher.js (0ms) (pid 1042)
Compiled specific.js (60ms) (pid 1042)
But when I go to the view,
ActionView::Template::Error (specific/chat/pusher.js isn't precompiled):
1: <%= javascript_include_tag 'specific/chat/pusher' %>
2: <%= javascript_include_tag params[:controller] %>
3:
4: <div id="chat-header">
app/views/messages/index.html.erb:1:in `_app_views_messages_index_html_erb___3285714722884343394_70246542189040'
I also tried putting config.assets.precompile .. option inside config/application.rb instead of production.rb
Related: Assets say "not precompiled" when they are precompiled
When I run assets:precompile and look in public/assets folder, I see that they are all precompiled (e.g. specific-bfgbfbf4534535.js)
So the asset is actually precompiled, but the error says it isn't precompiled
From my view:
<%= javascript_include_tag 'specific/chat/pusher.js' %>
You don't include specific files, you include the entire manifest, that's the whole point of manifests.
This can't work:
<%= javascript_include_tag 'specific/chat/pusher' %>
Instead, you need a single include for the top-level manifest:
<%= javascript_include_tag 'specifics' %>
From your comment below your question:
It's not supposed to be included in application.html.erb
That isn't how precompiled assets work. You need to include specifics.js, or build another (more granular) manifest. The point of manifests is that they produce a single minified blob of code to be included. You specifically say you see a specific-bfgbfbf4534535.js in your compiled assets folder; that is the file that will be included, and it contains pusher.js.
try to precompile all assets:
config.assets.precompile += %w( *.css *.js )

In Rails 3 how to create a layout that includes css that is only used by a certain view

I have a view called admin and I want to use a css file admin.css that is being used only in this page.
I created a new layout admin.html.erb in layouts. What do I put in there and how do I edit application.css so that admin.css is only being used in the admin view but every other stylesheet is included in admin view as well?
Thank you!
This is what I have in application.css so far
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require bootstrap_and_overrides
*= require custom
*= require admin
*= require_self
*/
Don't require admin in your application.css, else you would end including the content of this file in your processed css file.
Leave admin.css as it is (this file will hold all your admin css resource, you can even reference other files if you need it), remove the require admin line from application.css, and add the following in your application.rb:
config.assets.precompile += ['admin.css']
This will instruct the assets pipeline to precompile admin.css as a separate file.
Then in your admin layout include both:
<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag "admin" %>
And in your non-admin layout just include application.

javascript_include_tag :defaults does not work

I'm migrating an app to Rails 3. The following - which I've seen recommended in a few places - does not work:
<%= javascript_include_tag :defaults %>
In my case, it expands to this:
<script src="/assets/defaults.js" type="text/javascript"></script>
... which results in a 404. As I understand it, the :defaults is not supposed to include a file called "defaults.js"; it's supposed to include a few essential things like prototype.js and application.js.
Note that in my case, the following works fine. It's just that I'd rather use the official recommended way, if possible:
<%= javascript_include_tag :prototype %>
<%= javascript_include_tag :application %>
I'm running Rails 3.2.8 with ruby 1.9.3.
I do not have the following line in my config/application.rb (in any form). To migrate to Rails 3, I created a new Rails 3 application, and used that application.rb as a starting point:
config.action_view.javascript_expansions[:defaults] = %w(foo.js bar.js)
In app/assets/javascripts, I have:
Util.js
application.js
controls.js
dragdrop.js
effects.js
prototype.js
... and a bunch of stuff specific to my application.
Since Rails 3.1, it uses assets pipeline. It means you need to change your management of assets.
You have a assets/javascripts/application.rb file which contains something like this:
//= require jquery
//= require jquery_ujs
//= require_tree .
It seems you include jquery, jquery_ujs and all other files in the javascripts repository. With the last line you don't need to do anything else in this file. You just need to include the application file in your view and rails will manage everything:
<%= javascript_include_tag "application" %>
It's exactly the same thing with stylesheets.
Then in production environment, assets (images, stylesheets, javascripts) will be compiled and minified in order to be more efficient.
I suggest you read more about here
Hope this helps
Here's a lot more about the Asset Pipeline - http://guides.rubyonrails.org/asset_pipeline.html
It's meant to make it easier to break up your Javascript into separate files for development, yet compile and minimize them in production.

Rails asset compilation filenames

In my app I have the follow line
<%= stylesheet_link_tag "global.css", "pop_div.css", "log_in.css.erb" %>
log_in.css.erb is a simple css with one of the lines have a
background: url(<%= asset_path 'LightBg.png' %>);
and after looking at the source it turned into
background: url(/assets/LightBg.png);
which I guess is correct, since the website works.
My confusion is:
1- why does it give a url for /assets/lightbg.png while in the public/asset directory the file is actually called LightBg-47c90e283c305c002f6973edf4054002.png
2- Why in the source of the page I see
< link href="/assets/log_in.css.erb?body=1" media="screen" rel="stylesheet" type="text/css" />
and not log_in-447fd7902dbf635bf4231025699ce36a.css which is the name of the file in public/assets.
Shouldn't the compilation process turn the call of log_in.css.erb to log_in.css?
Thanks
The hashing is only enabled for production, in development you still get the plain file names. If you require other stylesheets and javascripts than application.js and application.css, you need to set the config.assets.precompile in config/environments/production.rb. And I'm not sure, if you still can pass several stylesheets to stylesheet_link_tag. But usually you want all javascripts and stylesheets compiled into a single file (application.js and application.css).