Newish to rails and I've read that I should put all my JS/CSS into applications.js/applications.css and have it handled by the asset pipeline. However, I have a decent amount of js/css that is only used when an admin is logged in and adding/editing pages.
It seems to me that it's a lot of overhead to load those scripts and styles on every page. What's the best way to go about optimizing this? I can create a separate asset pipeline that only gets included when admins are logged in, or only on pages where it's necessary?
-EDIT 3-
The below will work in production, however you need to add: config.assets.precompile += ['editing.js', 'editing.css.scss'] to production.rb
-EDIT 2-
The below doesn't actually work on production. Looking for a better solution when I get a minute.
-EDIT-
This is the setup that I've come up with. It works properly, so I guess I'm asking if there is any reason that I shouldn't do it this way?
application.html
!!!
%html
%head
%meta{:charset => "UTF-8"}
%meta{name: "Description", content: "base10 CMS"}
%title= "base10 CMS"
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
= csrf_meta_tags
- if admin_signed_in?
= stylesheet_link_tag "editing", media: "all"
= javascript_include_tag "editing"
= cloudinary_js_config
%body
#container
#messages
- flash.each do |name, msg|
= content_tag :div, msg, :id => "flash_#{name}"
#content
= yield
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
editing.js
//= require ckeditor/init
//= require cloudinary
//= require_tree ../../../vendor/assets/javascripts/.
application.css.scss
/*
*= require baseline
*= require bootstrap
*= require font-awesome
*= require_self
*/
#import 'mixins.css.scss';
#import 'layout.css.scss';
#import 'pages.css.scss';
editing.css.scss
/*
*= require_self
*/
#import 'mixins.css.scss';
#import 'admin.css.scss';
#import 'forms.css.scss';
Your approach is fine. One thing to keep in mind is that in production, all the directives within the application.js and application.css.scss manifests will get compiled and minified into a single file (application.js and application.css respectively) so in most cases there won't be much overhead. If there is tons of extra stuff that you're including to support logged-in admins, then yes, your approach is fine, otherwise, I wouldn't worry about it and just leave everything in the application.* manifests.
Related
My application has a lot of 3rd party js/css files. We sped up the deploy by compiling these files into external-[hash].js and external-[hash].css (So Rails don't have to compile these files on every single deploy)
And loaded them like this in application.html.erb
<%= stylesheet_link_tag "external", :media => "all" %>
<%= javascript_include_tag "external" %>
These two files are under /public/assets/. This was working fine when we are on Rails 4. We are currently trying to upgrade to Rails 5, and these two files are not loading properly.
I changed the tags into below and in the chrome console, these files appear to have been loaded properly.
<%= stylesheet_link_tag "/assets/external-[hash]", :media => "all" %>
<%= javascript_include_tag "/assets/external-[hash]" %>
However, when I add in the application style/js tags below the external tags
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I keep getting the error
Error: "img" failed to #extend ".img-responsive".
The selector ".img-responsive" was not found.
Use "#extend .img-responsive !optional" if the extend should be able to fail.
Looking into the external-[hash].css, I am able to see the .img-responsive selector defined. So, it seems like Rails 5 does not properly load these two files?
I'm currently using Rails 5.1.7, Ruby 2.4.2
I also tried adding config.public_file_server.enabled = true to environment files.
Here are how I've setup the external files.
I have an external.js, and external.scss, these files live under app/assets.
Inside application.js/css, I added stub external to both, so when the rails application deploys, it ignored the external files. I would run RAILS_ENV=external_assets rails assets:precompile and commit those files to git, expecting them to be loaded first.
Example external.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.readyselector
//= require bootstrap
//= require bootstrap-datepicker
//= require moment
//= require d3
//= require c3
//= require jsgrid.min
//= require bootstrap-datetimepicker
external.css
/*
*= require_self
*= require bootstrap-datepicker
*= require bootstrap-datetimepicker
*= require rails_bootstrap_forms
*= require c3
*= require jsgrid.min
*= require jsgrid-theme.min
*/
#import "font-awesome-sprockets";
#import "font-awesome";
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
Please let me know if I can provide any other information.
Try some below commands
RAILS_ENV=production rails assets:clean
RAILS_ENV=production rails assets:clobber
And change in production
config.assets.compile = true
Then again run
RAILS_ENV=production rails assets:precompile
In my Rails application i've got several layouts and for each I want to load special CSS how can I do this?
at the moment application.css looks like this:
//= require bootstrap.min
//= require filechooser
//= require bootstrap-switch.min
//= require jquery.datetimepicker
//= require fancybox2_1_5/jquery.fancybox
//= require style
*= require_self
*/
If you are using different layouts for different controllers, then you can use your special css or js files directly in your layouts by adding a method to your ApplicationHelper as follow:
def controller_stylesheet_link_tag
if params[:controller] == "foo"
stylesheet_link_tag 'foo'
else
stylesheet_link_tag 'bar'
end
end
Then, add this helper method to your layouts like application.html.erb -
<%= controller_stylesheet_link_tag %>
I like to use a specific JS/CSS for file for each layout (when applicable).
For example, app/layouts/application.html.erb would have your application.css, like this:
<%= stylesheet_link_tag 'application' %>
Whereas app/layouts/admin.html.erb will have admin.css:
<%= stylesheet_link_tag 'admin' %>
Using Sprockets 3 or later, you can even use index files in the directories to keep things organized.
app/assets/stylesheets/admin/index.css will be available as admin.css. See Index Files are proxies for folders for more info.
In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
I'm using Rails 3.2, and am somewhat confused about the handling of subdirectories and relative paths of the asset pipeline.
My situation
I'm trying to include four code files in (javascripts/edit), one of them being in the subdirectory javascripts/edit/ckeditor, in a manifest file, (javascripts/edit/all.js). I'm not including these in the application.js because I want to include these scripts only on certain pages.
Doing //= require ckeditor/ckeditor doesn't work. Doing //= require mycode (to require javascripts/edit/mycode.js), too, doesn't work, apparently because mycode.js is in the "edit" subdirectory of the javascripts "root" folder. To make it work, I had to put this:
//= require ./ckeditor/ckeditor
//= require ./json2
//= require ./cssjson
//= require ./mycode
inside of my manifest all.js. Note that this:
//= require edit/ckeditor/ckeditor
//= require edit/json2
//= require edit/cssjson
//= require edit/mycode
works exactly the same, even though all.js itself is already in the edit subdirectory.
So my question is, why does this work this way? I would expect to be able to put manifest files in subdirectories and just include files that are in that same subdirectory (e.g. //= require json2), but apparently, all //= require directives in any file below app/assets/javascripts always are relative to that "root" folder, not the subdirectory that the manifest files are in.
So my question is, why does this work this way?
Because when Rails compiles the assets, it's compiling from a central point, not your subdirectory. The manifest system works based on the assets' root path (the documentation says The first feature of the pipeline is to concatenate assets), consequently your assets will be compiled from the application.js file
You have to remember when Rails runs, it's not loading the assets dynamically. It's designed to load application.css / application.js all the time, and it's then up to the developer to delegate assets which they wish to load on specific pages
The way we do this is to include all the "constant" files in our application.js file, and then load controller-specific assets in the layout. This allows us to only call things like JQuery all the time, whilst we may call specific JQuery plugins for certain controllers:
Including The Right Assets In The Right Places
This is what we do:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag controller_name, "data-turbolinks-track" => true %>
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
#app/assets/javascripts/users.js.erb
//= require ** anything you want **
This allows you to have a lot more control over which assets you're loading
In Ruby on Rails v4, I want a js file (or set of js files) to be only loaded for a particular controller.
What is the standard way to do this?
In application.js there is the //= require tree . line. I'm assuming this would need to be removed so I'm not always loading every file. But then what? Will a file named mycontroller.js always be loaded when Mycontroller is used?
The asset pipeline can be very powerful if you do it right:
Manifests
The purpose of //= require tree . is to create a "manifest" file which Rails will use to render the files you call. If you don't "precompile" your assets, this means that each time your browser loads your app, it will look for the files contained in your manifest & load them
This means that you can define what you call in your manifest & what you don't. We prefer to call any gem-based assets in the manifest, but also designate specific folders, like this:
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
We use this setup to call all JQuery plugins & any extra JS, as well as the gem-specific files
Precompiling
If you pre-compile your assets, it basically builds different files which are loaded consistently when you load the browser. If you're using Heroku or a CDN, you may wish to precompile your assets, as to reduce latency & dependency
Application Design
To answer your question, you can certainly load controller-specific JS. We do it like this:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag controller_name, "data-turbolinks-track" => true %>
You can then ensure your JS files are split up by using what Phoet described:
#config/environments/production.rb
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(mycontroller.js)
Then for application.js, you can only call the files you want to persist throughout the app:
#app/assets/javascripts/application.js
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
It works like this:
You define additional files that should be precompiled:
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(mycontroller.js)
Then in your layout you implement some logic to include this file:
= javascript_include_tag "#{controller_name}.js" if controller_name == 'mycontroller'