I am just starting in rails and loading external resources like css and js has been an issue for me. Reading in few places, i found out that, css should be placed in app/assets/stylesheets and js inside app/assets/javascripts. After doing this i called my css and js in my view file like
<%= stylesheet_link_tag "<<path to my css>>" %>
for css and
<%= javascript_include_tag "<<path to my js>>" %>
and i included this line inside my config/initializers/assets.rb
Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]
but doing this gave me some sort of compilation error. But i am not sure whether its the correct way or not to load external resource.Where are the other place that i need to change in order to load css and js and the best practice to include external resources in rails in terms of performance as well.
Asset Pipeline
What you're referring to is something called the asset pipeline - the app/assets folder is where you store all the "dependent" files for your HTML -- css / js / images etc.
The asset pipeline is very simple -
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass and ERB.
It's function is to provide you with a way to "compile" your CSS/JS into condensed (minified) files, which you can call in your front-end HTML. The ultimate aim is to make your "assets" as small as possible, so your page loads fastest.
--
In your case, you'll want to look up Sprockets Manifest Directives --
#app/assets/stylesheets/application.css
/*
*= require self
*= require_tree .
*/
The above will take every CSS file in app/assets/stylesheets and concatenate them into a single application.css file:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
So to answer your question directly, you only need to store external stylesheets in your app/assets/stylesheets folder.
If you have a "real" external stylesheet (hosted by Google or something), you'll want to include it in your layout as follows:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, "http://cdn.google.com/stylesheet.css" %>
Once you add your css and js in assests respective folder, you have to require those files in application.js and application.css and then you can include these two files in your html. Try following code:
application.css
//= require abc
application.js
//= require xyz
In your html:
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
Related
I’m using Rails 4.2.3. I have the following folder of Javascript files
app/assets/javascripts/flot/
I want all the files in this folder included on only a single page (i.e. only one action from a controller). Is is possible to do this without hard-coding every file in a javascript_include_tag in my view? Note, I am NOT interested in answers in which all the JS files get included on every action of the controller. I only need these files for the view rendered by one action.
You could create a master JS file in that folder and throw in a list of
//= require [file name]
into the mix so it loads all of them from that list.
Then include the following line in the view you want to use.
<%= javascript_include_tag "flot/[master file name]" %>
Javascript_Include_Tag
For example you could name your file app/assets/javascripts/flot/main.js
Then the content would be
#flot/main.js
//= require_tree .
and
#your view
...
<%= javascript_include_tag "flot/main" %>
...
Then any files added to your flot folder or subfolders would automatically be added to your tree. Just make sure you've excluded the flot folder from the require_tree in your application.js file as explained in this link
I am using Middleman for a project and would like to only load certain JS files on certain pages. How can I configure the asset pipeline to only load specific JS files? I've found answers for the asset pipeline in rails applications (ex. http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/) but I'm not sure how to apply this Middleman.
Thanks!
//= require_tree ./general
//= require_tree ./ckeditor
//= require_tree ./custom
In application.js file include the path of those js files which you want to load by default for all the applications. In the above code ./general will include all the js files under app/assets/javascripts/general/ and so on.
If you want certain js file to be loaded in your pre-defined view page then you need to call it explicitly from that view page as:
<% content_for :scripts do %>
<%= javascript_include_tag 'your_custom_js_file_name' %>
<% end %>
The file location of your_custom_js_file_name.js file is app/assets/javascript
We need to yield script in the layout file so, include this:
<%= yield :scripts %>
Besides you need to specify to compile in for production environment. So in production.rb do this:
config.assets.precompile += [ "your_custom_js_file_name.js", "your_custom_js_file_name2.js"]
Credit goes to: site
I understand the "why" part of "why do all js / css files get included in rails asset pipeline" as explained here.
However, that's not always desirable, is it? For instance, I have a non-standard layout I use just to display items that require Google maps. I don't want all the external gmap libraries included on all pages-- it's not necessary and is just wasteful-- but if I don't include them on every page, the calls to the google api in the map.js.coffee files will throw errors.
Is there a way to force the map.js.coffee ONLY show on a maps view?
There is one solution, the javascript_include_tag:
# assets/javascripts/
# user.js.coffee
# form.js.coffee
# map.js.coffee
# views/users/location.html.haml
= javascript_include_tag 'map'
But defining //= require_tree . in the assets/application.js does include all JS files, am I right?
So doing this would include the file twice, right?
Update: Following this RailsCast ( http://railscasts.com/episodes/279-understanding-the-asset-pipeline ) We might be able to create a public folder, containing all "shared" js files, and require it: //= require_tree ./public
To combine what the other answers suggested and other sources on the web advised, it seems like the best answer to this situation is to do the following:
Create subdirectories in the assets/javascripts and assets/stylesheets directories as well as maps.js and maps.css files. In my example above you'd have
app/
assets/
javascripts/
application.js
maps.js
maps/
site/
stylesheets/
application.css
maps.css
maps/
site/
Create any needed page-specific javascripts / stylesheets in those directories.
The maps.js file would look like:
//= require_tree ./maps
which will include all items in the maps directory / subdirectories.
The application.js is the same but includes the "main" site resources as well as any site-specific items:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree ./site
Create a maps layout file called views/layouts/maps.html.erb, and in the layout file, use the javascript_include_tag to change which js / css file gets parsed for includes:
views/layouts/maps.html.erb:
<%= stylesheet_link_tag "maps", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "maps", "data-turbolinks-track" => true %>
views/layouts/application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Make sure the MapsController specifies the maps layout!
class MapsController < ApplicationController
layout "maps"
Notice the line in application.html.sim:
= javascript_include_tag "application"
You want to include a different set of javascripts in a different layout map.html.slim, then create another javascript file, such as map.js.coffee, and in this file you included only files you need. Now the layout file needs to use this
= javascript_include_tag "map"
I'm my application.js file I have:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Does this mean my app is importing jquery? I'm a little confused about exactly what this is doing. In my gemfile I have gem 'jquery-rails'.
In my view I have the following:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
I believe the "javascript_include_tag 'application'" is including the "//= require..." lines, correct?
Now if I want to add a "jquery plugin", specifically hcSticky for the navbar, the instructions say to include <script type="text/javascript" src="jquery.hcsticky.js"></script> "below my <script type="text/javascript" src="jquery.js"></script>. Thing is I'm not explicitly declaring this script anywhere. Am I technically not using jquery then since I don't have the anywhere? The documentation seems to say that the javascript_include_tag will do that for me, but I can't tell exactly what it's doing. Man, so much to learn, so much to figure out. Much respect to everyone who understands all this technology. Thanks for any help.
Is jquery included?
The //= require jquery will include the jquery.js file from the jquery-rails plugin. So you have jquery already included in your html.
If you had doubts in that, please open a page in your application (running in development mode) and view the html source code, there you will see all the javascripts included. (In production mode, all the javascript files will be concated and minified into one single file- application.js for performance reasons.)
How to add a specific new jquery plugin?
Download the js file(jquery.sticky.js). Put it in the /app/assets/js folder. And your //=require_tree . will include all files inside /app/assets/js and its subfolders. So your new plugin will be automatically included.
I'm unclear about where javascript files and stylesheets should be added to a Rails project. Perhaps they should be added to public/javascripts and public/stylesheets respectively. Then they're copied to app/assets? Or perhaps it's the other way around.
I've experimented with <%= stylesheet_link_tag :all %> and :default and just explicitly naming my stylesheets but I'm still confused.
Where should javascript files and stylesheets be added to a Rails project?
It is the other way around. You add stylesheets and javascripts to their respectable folders in assets.
You then use:
= stylesheet_link_tag "application"
= javascript_include_tag "application"
Check the guide for details http://guides.rubyonrails.org/asset_pipeline.html
In a Rails 3.1 application, where the asset pipeline is enabled, you want to place your script/stylesheet assets in app/assets. Rails will automagically find them via Sprockets and serve them up minimized and contaminated (in production).