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.
Related
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)
In my manifest file I have the following:
// 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.
//
// 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 turbolinks
//= require_tree .
and my inclusion is pretty standard:
<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>
But for some reason, this is the output:
<script src="
<script data-turbolinks-track="true" src="/landf/assets/application-f197c043b1bf438ab7beaa68751618f6.js"></script>
Anyone have an idea why it's doing this? As far as I can tell, I'm following the docs just fine. Thanks for any help!
Update
It looks like if I put that tag in the <head> there isn't an issue, but placing it right before </body> causes the issue.
hi you can place your javascript tag at the end of the file below body tag, it wil load faster. Check if placing it below doesn't cause the issue
Ended up being a method I was running a different asset through that was causing the initial script src to be corrupted, causing the collision of multiple script tags.
Is there a way to add all files in Vendor third party libraries with sepearate application.css and application.js file?
Can I just add those two files under Vendor folder and require_tree from there like below?
/*
*= require_tree assets/stylesheets/.
*/
Some say that I should include in app/assets/stylsheets/application.css file but I think there is another way like above.
You can do that with a little bit tweak
Sprockets uses files named index (with the relevant extensions) for a special purpose.
For example, if you have a jQuery library with many modules, which is stored in lib/assets/library_name, the file lib/assets/library_name/index.js serves as the manifest for all files in this library. This file could include a list of all the required files in order, or a simple require_tree directive http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives (See 2.2.2)
That is said, say your vendor CSS directory is vendor/assets/css/foo, with the following files
/foo
bar.css
baz.css
Then you can create a file foo/index.css with following content
/= require_tree ./
Then you can include this lib in your main application.css as
/= require foo
Disclaimer
I have not used the above technique by myself. I just followed the guide and made assumption.
I myself recommend require CSS one by one as order matters in CSS. Even the files are in vendor, you can require them directly in application.css like
/= require foo/bar
/= require foo/baz
Try putting this in your javascript file (vendor.js):
//= require_tree ../../../vendor/assets/javascripts/.
and this in your css file (vendor.css):
//= require_tree ../../../vendor/assets/stylesheets/.
You could put these in app/assets/stylesheets/vendor.css or app/assets/javascripts/vendor.js, and then include them in your _head.html.erb partial:
<%= stylesheet_link_tag "vendor", :media => "screen, projection" %>
<%= javascript_include_tag "vendor" %>
Make sure to add these to your assets to be precompiled as well (config/environments/production.rb):
config.assets.precompile += ['vendor.css', 'vendor.js']
Also, cool username! :D
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.
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