I have a rails application and the homepage is mostly a static page with some jquery. Once the user logs in there are other javascript files that are being used.
However, when I load the homepage I can see that all the js files are being loaded.
Is there a way not to load them? Should I remove //= require_tree . from application.js and somehow load them only when they are needed on other pages? I guess that should improve the loading time and Google pagespeed insights.
Thanks!
Removing //= require_tree . would stop loading all js in the tree. However, we have no idea what "the home page" is or what the rest of your application will need the js for. If you have a controller end point i.e. HomeController#index you might just wanna use a different layout for that controller/action and omit the //= require_tree from that layout. Create a separate layout file, you could copy application.html.erb to views/layouts/home.html.erb for example and omit the line
<%= javascript_include_tag 'application' %>
Then something like this in the controller:
class HomeController < ApplicationController
layout 'home'
end
Related
I am finding few ways to get my work routine good with Phoenix as I have with rails, There are some perspectives which I am looking in Phoenix are.
1: In rails, I have my controller and my view, also the CSS and JS files alongside, When I want to include CSS files only in one relevant view, I only do as
<%= yield :head %>
and In my View file, I only do
<% content_for :head do %>
<%= stylesheet_link_tag "views/index/landing.css" %>
<% end %>
That's it. My CSS file is only loading for my relevant view.
2: For JS, I have application.js file in which I included my other libs and in the end, I have admin.js in which I have included my every other file as
//= require jquery
//= require dataTables/jquery.dataTables
//= require jquery_ujs
//= require bootstrap.min
//= require admin/admin.js
admin.js.coffee file
#= require admin/sign_up.js.coffee
#= require admin/company.js.coffee
#= require admin/user.js.coffee
3: For every JS file What I am doing is, e.g for Signup view's JS file I have done as under, in the very end of the file,
window.initializeSignUp = ->
onSignUp()
after this What I only need in my sign up view is
<script>
$(document).ready(function () {
window.initializeSignUp();
});
</script>
Now it's only calling that method of Signup and everything is working fine.
On the other hand, I love Elixir it's a very good and lovable language to work in, BUT whenever I start project in it, I already got afraid of Brunch and how Assets are going to be handled.
for those who will read the question and will just downvote without even understanding the main issue here: Am a newbie to Phoenix for creating an APP with views and assets, etc.
I just need a clear and correct answer to work with Phoenix without using brunch or any web-pack solution, But a normal way, Is that possible in possible?
I believe your question has been answered here. The answer shows how to add page specific javascript but the same technique can be done for your css styles.
Here's a good explanation of how templates/views work in Phoenix.
New to Rails (Have used it for 3 weeks). I have several views and their corresponding scss file.
For example,
Views
view1.html.erb
view2.html.erb
view3.html.erb
Stylesheet
view1.scss
view2.scss
view3.scss
When I load view1.html inside <head> of the page all three stylesheet file are been loaded (I actually do now need view2.css and view3.css at this moment).
Is there a reason behind it? Why not just load the static file the current page need? For example, only load view1.css in page view1.html.
I do know in production environment all these will be combined into one single file. Is that because all these static assets will be cached by the browser so load a single file at the first time make the subsequent visit much faster?
The reason I ask this question is because I would like only include controller specific stylesheets in the page. I have tried code below but which cause non ppreprocess error.
<%= javascript_include_tag params[:controller] %>
<%= stylesheet_link_tag params[:controller] %>
I am still reading the doc at link below,
http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets
Thanks for your time viewing the question.
You can try achieve that in this way,
If you generate a controller named Userscontroller
Rails adds new files at app/assets/javascripts/users.js.coffee and another at app/assets/stylesheets/users.css.scss.
You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as
<%= javascript_include_tag params[:controller] %>
or
<%= stylesheet_link_tag params[:controller] %>
First, disable the default loading of all stylesheets by removing any extra requires in the application.css manifest.
*= require_tree .
Remove this line or change to,
* require_tree . // removed '='
Tell Rails to compile our controller assets
By default, the asset pipeline only compiles application.js/.css and any files they require. Because we removed the require_tree . directive, we need to tell Rails about our controller-specific assets or they won’t get compiled.
Create a new initializer file called config/initializers/assets.rb and add the following (replacing the controller names with your own):
%w( controller_one controller_two controller_three ).each do |controller|
Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css.scss"]
end
Note: You can rename the css.scss to css also.
Check this link for details
Explicitly declare all controllers make me feel bad, therefore, we replace #Sravan 's solution to the code below,
Rails.application.config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*$/
Rails.application.config.assets.precompile += ["*.js.es6", "*.scss"]
<%= javascript_include_tag "application", params[:controller] %>
I added the above tag in my application.html.erb, but it seems my js files are not loaded according to controller. When i navigate to localhost:8000/sessions it does not load sessions.js
Rails now uses the asset pipeline. In app/assets/javascripts/application.js you can require all your of javascript files with "magic comments":
//= require_tree .
Your javascript can now be inside app/assets/javascripts/sessions.js or even app/assets/javascripts/sessions.js.coffee if you want to use coffeescript.
Note that this will require all Javascript files on every page, which is often a desired effect because the client can cache the javascript and thus only has to download it at the first request. For more information read the Rails Guide I linked to above.
You can load controller specific js files as follows
<%= javascript_include_tag "application", controller_name %>
So that, if you navigate to localhost:8000/sessions it will load sessions.js file. And it is not necessary to add //= require_tree . in application.js.
I am reading rails guides documentation for asset pipeline.
It states that coffeescript page specific generated files
are by default ready to user if there is a require_tree directive on the manifest.
This is not working with me I have to do include this
<%= javascript_include_tag params[:controller] %>
on the specific controller.
What am I missing ?
The asset pipeline will compress all of your JS into a single file, application.js. In order to call JS for a specific page, you will need to organize your JS by controller and action. There is a gem, RailsScript that does this automatically and it's compatible with Turbolinks which can give you a single page application feel.
RailsScript only takes a few minutes to learn, https://github.com/gemgento/rails_script.
A specific example using rails script:
# app/assets/javascripts/users.js.coffee
window.App ||= {}
class App.Users extends App.Base
show: ->
alert('The users#show action!')
I think you are misunderstanding the asset-pipeline in general. It doesn't load the javascript-files individually, but rather all the .js.coffee files will get compiled into one big js-file, which you have to include in your views/layout like this
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
If you want some js-code that is only available in one view, you definitely should not include that into the asset-pipeline.
Not sure if I've misunderstood your first paragraph, but I think what the line means is that if your application.js manifest contains a line like:
//= require_tree .
Then yes indeed, page specific javascript, or coffeescript will be loaded, not only for that specific page, for for all pages. If you want to constrain assets to certain pages like you've described, you will need a file located in app/assets/javascripts/ with the pluralized name of the controller, and .js.
I would personally create this as another manifest for that specific page, that way I can load multiple assets. Lets say you have a controller called UsersController, with various assets used by that controller's views. What you then need, in order for the line you wrote in your question to work, is a .js filed users.js or users.js.coffee in the app/assets/javascript directory.
Alternatively, to maintain the naming convention, I do something like this:
<%= javascript_include_tag "application-#{params[:controller]}"%>
and then of course name my file appropriate (application-users.js).
Also, when you do this, you'll want to stop your page-specific assets from loading for all controllers. Simply remove the //= require_tree . line and replace it with explicit //= require lines as needed.
Here's a way to do page-specific javascript in rails.
Install the jquery-readyselector.js plugin. (It's 18 lines)
a. Copy the contents of https://raw.github.com/Verba/jquery-readyselector/master/jquery.readyselector.js
b. Paste the contents to a new file at assets/javascripts/jquery_readyselector.js
c. Require jquery-readyselector
// assets/javascripts/application.js
//= require jquery_readyselector
//= require_tree .
Create CSS classes so we have a way to reference each page individually.
<%# views/layouts/application.html.erb %>
<body class="<%= controller_name %> <%= action_name %>">
Now we can scope our javascript to our page using CSS.
// assets/javascripts/posts.js
$(".posts.index").ready(function() {
});
So my application.js file is including jquery accordingly, and everything I've put directly into it.
However, one of my controllers - lets call it Books - has its own books.js file
I want the books.js file only to be present when viewing pages within the books controller.
It doesn't seem to be including it at all though - any ideas?
First you should look at http://railscasts.com/episodes/279-understanding-the-asset-pipeline
Second in app/assets/javascripts/application.js
does it contain something like
//= require_directory .
or
//= require_tree .
try:
<%= javascript_include_tag params[:controller] %>
"everything I've put directly into it." ...does that mean you put your own code into application.js? If so, you might want to read a tutorial on the asset pipeline.
But anyways, sounds like //= require_tree . is missing.