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.
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)
I pin my assets in application.html.erb such:
<%= javascript_include_tag("scripts.js") %>
But when I look in later, it includes and scripts.js and application.js. Double time. How can I fix it and how can I put all my JS or CSS files into application.js(.css) without other files in <head> part?
Your scripts.js is required twice.
1 time from the require_tree . in your application.js
1 time from your javascript_include_tag("scripts.js")
Remove one of them and your scripts.js will be called once.
Moreover, if you want to load only one js file (application.js), just remove your javascript_include_tag and your compiled application.js will contain the javascript from scripts.js. (It's the same for CSS)
More documentation here
I would like to serve a specific js file in production (heroku) without timestamp.
I am able to serve the file separately, but it is served with timestamp which I don't want. The reason is I want this file get accessed by other sites.
Here are the codes:
application.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'ca4me', 'data-turbolinks-track' => true, :cache => false %>
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 bootstrap-slider
//= require bootstrap.min
application.rb
config.assets.precompile += %w( ca4me.js )
HTML source in production environment:
<script data-turbolinks-track="true" src="/assets/application-b83af88604eb0fb1867384db77b826ae.js"></script>
<script cache="false" data-turbolinks-track="true" src="/assets/ca4me-fcff49d8b1799052a3f84c913160f6b2.js"></script>
So is there away I can serve ca4me.js without the timestamp?
File
The reason is I want this file get accessed by other sites.
We did this:
/public/your_js_file.js
This is a pain to keep updated, but means your app will always have the file available at /____.js. Indeed, when you use asset precompilation, the assets are deployed to folders in the public directory like this:
- public
|-stylesheets
|-javascripts
|-images
If you're looking to keep a file available for other sites (like a widget or something), I would personally keep the code base separate from your Rails app, using Grunt or similar (saving the file to rails_app/public directly.
Digest
I wanted to learn about this, and I found this:
config.assets.digest_exclusions << /fontawesome/
The only problem is this is for the digestion gem - meaning it won't be available in Rails 4. I am still trying to find information regarding how to accomplish this in Rails 4, and I would recommend looking at my solution above for now
--
Personally, I would rely on the asset pipeline for my assets, and keep a file in public if I wanted a static location for people to access. The likelihood is that file (library?) will be updated in conjunction, albeit exclusively, with the Rails app; meaning you may wish to keep the code bases separate
I have a view with the following namespace
view/kids/registration/new.html.haml
Now I need to create a js file to this view, so I created a file in the following path:
assets/javascripts/kids/registration/new.js
Then I add the following lines to the application.js:
//= require ./kids/registrations/new
But it does not work. What I'm doing wrong. I'm checking the DOM (localhost:3000/kids/sign_up) but I never find line with this javascript file.
Thanks in advance for your help.
Adding the route
new_kid_registration GET /kids/sign_up(.:format) frontend/registrations#new
What I'm doing wrong.
Thanks.
Try //= require kids/registrations/new or //= require kids/registrations/new.js
I had faced similar problems while adding stylesheets to assets (Link to my question)
Here are few things you might wanna try:
As suggested by BOB add the require statements to application.js
I remember adding the list of files to application.rb as:
config.assets.precompile += ['jquery.colorbox.js','colorbox.css', 'reportng.css', 'reportng.js']
Your JS file can be placed anywhere in lib/assets/javascripts,
assets//assets/javascripts & vendor/assets/javascripts
Try using the
<%= javascript_include_tag "your_js_file_name" %> in your view file
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.