I'm studying assets precompile and I'm confused.
Let' say I created a new application like rails new dummy.
This is the generated app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
It says This is a manifest file that'll be compiled into application.js. It's still clear up to this point, but I found out that there's another configuration that we can set under config/application.rb: config.assets.precompile << \some_regex\.
Now I'm unclear what's the difference between changing application.js vs config.assets.precompile for selecting what to be compiled.
I feel like I'm missing the bigger picture here, can someone help to explain this?
The application.js file is for Javascript, as the name suggests. Because of the lines below in the file, jquery, jquery_ujs, turbolinks javascript library, and every Javascript files in your /app/assets/javascripts folder will be pre-compiled.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
You can use the "config.assets.precompile" to add other things to be pre-compiled such as font files and other files that are not recognized by Rails by default. You can use it to include javascript files as well. But, such needs are rare.
An example of it would be....
config.assets.precompile += %w( .svg .eot .woff .ttf )
I hope this makes sense.
Related
Currently, my application.js file includes:
//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require ckeditor/init
//= require_tree .
The problem is ckeditor is being loaded on every page when I only need it on one admin like view Articles#New.
What is the correct way in Rails 4.2, to make ckeditor's JS only load on the Articles#New view?
Please follow some steps
Remove from application.js //= require ckeditor/init
at page articles/new.html.erb add following line
javascript_include_tag "ckeditor/init"
in config/initializers/assets.rb add following lines
Rails.application.config.assets.precompile += %w( ckeditor/* )
I think #Vijay's answer is exactly the right one.
The config.js not found problem is another problem. The url is probably hard coded in the init.js, because "ckeditor/config.js" seems not like normal precompiled filename which usually looks like config-7efjsdhfduey44xxxxxx.js.
The assets/ dir only has precompiled files in production so the config.js is not found.
You can:
change init.js to init.js.erb
change every path it uses in the file to "asset_path", ex:
'config.js to <%= asset_path 'ckeditor/config.js' %>
do 1,2 for every file under ckeditor/
When using Sprocket in production, the right filename is important.
or you can just include the ckeditor from CDN and forget all about this j/k
Or they are? When I use inspect element on any bootstrap component it's taking CSS from application.css (not bootstrap itself). I'm pretty sure I did something wrong when installing even though I went through the guidelines a few times.
Forgot to add I'm using Rails 4.2.6 and using the gem from:
https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails
This is what I mean, for example the btn classes are working but they do not point to Bootstrap in inspect element but rather to application.css. Also the navbar (copy paste from getbootstrap.com) works as far as javascript dropdowns go but CSS is off.
Gemfile
#Bootstrap V4 Alpha
gem 'bootstrap', '~> 4.0.0.alpha6'
* sprockets-rails (3.2.0)
application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
#import "bootstrap";
application.js
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
In your application.js file place //= require bootstrap after //= require jquery so the file will be look like this:
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Restart your rails server and the changing will take effect.
Look very closely at your application.css file's comments.
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
This is why it appears as though all the css is coming from the application.css, but you are importing the bootstrap css at the bottom of the file..
I am trying to make a custom manifest javascript file seperate from application.js. I've take the code from application.js and pasted it into a new file I've called "other_manifest.js" and placed in the assets/javascrips directory. Here is the code:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
In my assets.rb file, I've included the line:
Rails.application.config.assets.precompile += %w(other_manifest.js)
I precompile and clean the assets locally, and then when I run the page, all i get is the exact text from the manifest file. It is not bringing in any of the files. How do I create a custom manifest file?
Easily
You have application.js. Create a second file: other_manifest.js
Then in your layout layouts/application.html.erb (could be a different layout altogether):
<% if condition %>
<%= javascript_include_tag 'other_manifest' %>
<% else %>
<%= javascript_include_tag 'application' %>
<% end %>
And yes, you need to add in your config/initializers/assets.rb (followed by reboot):
Rails.application.config.assets.precompile += %w(other_manifest.js)
Also, make sure to remove the //= require_tree . from manifests. Because it will include ALL the javascript in the manifest (making having a different manifest pointless)
As it says on the tin. It seems like javascript_include_tag :all includes /assets/all.js instead of all of them.
Is there a way to just include everything there plus all the subfolders?
Why don't you just use the default generated application.js ?
/app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
Take a note on the last line: //= require_tree . That should include all your javascript.
/app/view/layouts/application.html.erb
<%= javascript_include_tag "application" %>
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
The require_tree directive tells Sprockets to recursively include all
JavaScript files in the specified directory into the output. These
paths must be specified relative to the manifest file. You can also
use the require_directory directive which includes all JavaScript
files only in the directory specified, without recursion.
For site wide specific JS code (i.e. for the header, which appears on all pages). Where should this be placed? In:
app/assets/javascripts/application.js
Is that right?
For pages#home. Which root_url also points to (root :to => 'pages#home'). Where should my JS file be placed in the pipeline?
app/assets/javascripts/pages/home.js
And regards to my application.js. Is this right? It currently looks like:
//= require jquery
//= require jquery_ujs
//= require_directory .
Or should I just embed page specific JS in the view?
It's not a good idea to put js code in application.js. You can put that code in any other file on the assets/javascripts folder and it will be included automatically by the require_directory or require_tree command. Your application.js file is perfectly fine as it is right now, but you might want to use require_tree instead of require_directory for recursive inclusion.
For example, the javascripts files in app/assets/javascripts/pages will be included by require_tree but not by require_directory.
Recommended reading: Asset pipeline guide