In my application.html.erb I have:
<%= stylesheet_link_tag "application", :media => "all" %>>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
Which outputs something like this:
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
How can I add output spacing for such results?
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
you can try
stylesheet_link_tag("application", :media => "all").split("\n").join("\n ")
but you really think it worth the trouble?
You can see your HTML properly indented with firebug or something. Also this is more bytes to load while getting your webpage.
Related
I am trying to create a rails app and I have couple of css and js files to be added to rails app pipeline. These are;
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-stepsform/css/component.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootsclertrap-datepicker/css/datepicker3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/summernote/css/summernote.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/codrops-dialogFx/dialog.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-dialogFx/dialog-sandra.css" rel="stylesheet" type="text/css" media="screen" />
<link href="pages/css/pages-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="assets/css/style.css" rel="stylesheet" type="text/css" />
as in the theme I am trying to use. But if I only separate these css js and image, the problem is some of the css files are using img files inside their directory.For instance, select2.css uses background: url('select2.png') right top no-repeat; Or bootstrap min (I know I can add gem for this) uses url path to src:url(../fonts/glyphicons-halflings-regular.eot). So should I go over css and js files and search for their dependents?
I am so stuck in to designing this in a rails way. Thank you
After deploying my rails app to heroku, there are no dropdown menus!
When running locally, my source looks like this :
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/admins.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/associates.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/dasharea.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/database.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/members.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="anbyACcBlOI2Zpa9E2TImosNiBYN5KFTC8heYI1TE+I=" name="csrf-token" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script src="/assets/jquery.ui.button.js?body=1"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script src="/assets/jquery.ui.mouse.js?body=1"></script>
<script src="/assets/jquery.ui.draggable.js?body=1"></script>
<script src="/assets/jquery.ui.resizable.js?body=1"></script>
<script src="/assets/jquery.ui.dialog.js?body=1"></script>
<script src="/assets/jquery.ui.droppable.js?body=1"></script>
<script src="/assets/jquery.ui.effect.js?body=1"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script src="/assets/jquery.ui.selectable.js?body=1"></script>
<script src="/assets/jquery.ui.slider.js?body=1"></script>
<script src="/assets/jquery.ui.sortable.js?body=1"></script>
<script src="/assets/jquery.ui.spinner.js?body=1"></script>
<script src="/assets/jquery.ui.tabs.js?body=1"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script src="/assets/jquery.ui.all.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
In Heroku, it look like this :
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.ui.all.js"></script>
<script src="/javascripts/jquery_ujs.js"></script>
But the links in Heroku return not found!
For a special reason, I included the jquery in my head manually like this :
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery.ui.all' %>
<%= javascript_include_tag 'jquery_ujs' %>
Is this the reason things are failing? How to fix it without removing these from the head?
In (most) production setups, only the files in public/assets are available for use directly in link or script tags.
When you push to Heroku, it precompiles app/assets/javascripts/application.js by merging and compressing all javascript files required in application.js into a single file at public/assets/application-xxxxxx.js. Individual files, such as jquery.js, are not available. Therefore, it's recommended to use
<!-- HTML -->
javascript_include_tag 'application'
// inside app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
However, if you insist on including jquery manually without requiring it in application.js, you can add it to config.assets.precompile.
# config/environments/production.rb
config.assets.precompile += ['jquery.js', 'jquery_ujs.js']
(Note: A friend told me that Heroku doesn't read production.rb during precompilation. If that's the case, try adding the above to config/application.rb instead.)
When you push to Heroku and precompile your assets, you should see
$ rake assets:precompile
I, [] INFO -- : Writing public/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js
I, [] INFO -- : Writing public/assets/jquery_ujs-02181b3e64cd9e4e8548cad033516231.js
On Heroku, the script tags should now look like
<script src="/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js"></script>
Here is the page source header from Heroku production:
<head>
<title>Gosgf</title>
<link data-turbolinks-track="true" href="/assets/application-e11c07d8fd96415a6de17e941d115bde.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application-786dea1c8b4a7b9d1635fb121196a3f3.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="LAzUNgZEUmay9OLVUsN0u6Amz/9BVJngJKvE+B6+L1g=" name="csrf-token" />
</head>
Here is from 127.0.0.1:3000
<head>
<title>Gosgf</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/games.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jgo/jgoboard.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jgo/jgoboard_small.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sgfs.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/welcome.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/games.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/all-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/autodiv.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/jgoboard.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jgo/sgf.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery/jquery-1.10.1.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery/jquery-1.10.1.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery/jquery.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sgfs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/welcome.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="8+ZHwU8R9V/V5zgoVL3fqyGKxYG2BxV2f8LtRCZNDAg=" name="csrf-token" />
</head>
A lot of js and css under app/asserts are ignored by Heroku.
I have already added:
gem 'rails_12factor', group: :production
in Gemfile.
Assets are pre-compiled:
RAILS_ENV=production bundle exec rake assets:precompile
git add public/assets
git commit -m "compiled assets"
before push.
In config/environments/production.rb:
config.serve_static_assets = true
config.assets.compile = true
How can I tell Heroku to load the js and css assets?
This is normal - the application.js and application.css that your production page does load should contain all of your application's assets (at least anything that has be included by the application.css or application.js manifests).
This is (among other things) what precompiling does.
At first in production.rb
config.assets.compress = true
I change this and i run production mode.
Now all css and js are combined and view as
<link href="/assets/application-216f7d9bf69633b46766413cf646b8a5.css" media="all" rel="stylesheet" type="text/css" />
<script media="all" src="/assets/application-cfa3f1d1e18cc9a8acfb0492bd8ae99e.js" type="text/javascript"></script>
But now i want all css and js to load individually not in compress mode
so i changed
config.assets.compress = false
Now i want to so my ctrl U as like this
<link href="/assets/bootstrap-wysihtml5/core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/wysiwyg-color.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/index.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/app_modules.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/assets.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/authentications.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />
I mean all in uncompress form. But it is not workin.. again it comes in compress form like before. Do i have to clear cache or where i am missing?
In your application.rb you also need to disable asset pipeline for production mode.
application.rb :
# Enable the asset pipeline
config.assets.enabled = false
I have a layout page thusly
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("JS", required:false)
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
</body>
</html>
And then a view like so
#{
ViewBag.Title = "Home";
Layout = "~/views/shared/_layout.cshtml";
}
#using RS.Common.HtmlHelpers;
#section JS
{
<script src="#Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
<script src="#Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
#section CSS
{
<link href="#Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}
<h4>Test!</h4>
The page loads fine as I expect. However, I am getting 3 warnings:
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'
This error, one for each of the tags in the CSS section on the view.
It is only really an annoyance at this stage, but I wondered what the cause (and thus solution) for this error might be?
You have specified HTML5 DOCTYPE and yet trying to validate as XHTML 1.0 Transitional. I suppose that the final rendered HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
<link href="/content/menu.css" rel="stylesheet" type="text/css" />
<script src="/scripts/fue.js" type="text/javascript"></script>
<script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>
<link href="/content/hp.css" rel="stylesheet" type="text/css" />
<link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
<link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4>Test!</h4>
</body>
</html>
You might want to invert the order of the two RenderSection in your layout so that the links and scripts are grouped together. Or you might also consider moving the script declarations to the end of the page:
Like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#RenderSection("JS", required:false)
</body>
</html>