When I use the application layout, the .js files already get concatenated and compressed in production environment. How about if i have a new layout on a different controller, How can I concatenate the .js files like in application layout?
And also for the css can I also merge it it to 1 file?
Controller
class ThingsController < ...
View
Let's say in app/views/things/index.html.haml
= javascript_include_tag 'things'
Assets
In app/assets/javascripts/things.js
//= require file_1
//= require file_2
//= require file_3
This way file_1, file_2 and file_3 will be included in things.js
Configuration
In production
config.assets.precompile << 'things.js'
Related
I am using the Controller-specific Assets configuration, it woks perfectly except with the newly installed [Rails-Devise] authentication bundle (https://github.com/plataformatec/devise).
For instance on registration page (controller devise/registrations), The assets on /stylesheets/devise/registrations.css and /javascripts/devise/registrations.jsare not loaded (404).
Devise works fine when I reactivate both the
application.js
//= require_tree .
and
application.css
*= require_tree .
but :
Is it possible to add devise gem's assets in a way that allows to keep the controller specific assets ?
Thanks,
Devise doesn't have any stylesheet or javascript assets.
--
You'll be best using some conditional logic in your layout, to determine whether you're using a devise_controller or not:
#app/views/layouts/application.html.erb
stylesheet_link_tag :application, (controller_name unless devise_controller?)
This uses the devise_controller? helper
Rails XHR get request is not instantiating the corresponding js file.
Example XHR localhost/admin does NOT load assets/admin.js which is breaking my js functionality. The only way admin.js will load is with a hard browser refresh.
If I include all the js code within admin-index view (that works too), but I want to keep it separated.
I tried updating development.rb as:
config.assets.debug = false
And tried adding this:
config.assets.precompile += %w( *.css *.js )
Can someone explain to me how to go about this please? Thanks.
I fixed this problem by adding the jquery-turbolinks gem. https://github.com/kossnocorp/jquery.turbolinks
Gemfile:
gem 'jquery-turbolinks'
Add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
I recently installed active_admin gem.
Everything is working fine on Rails4, but jquery in my bootstrap page is not working anymore.
All animations are broken now, its like static page.
Any way of fixing it?
Thanks,
Michael
Solved.
What i did was, moved file active_admin.js.coffee from app/assets/javascript/ to vendor/assets/javascript . Also moved file active_admin.css.scss from app/assets/stylesheet/ to vendor/assets/stylesheet/ .
In application.js from content nothing was added, and require_tree is needed for both of those 2 files (application.js. and application.css )(no need to delete require_tree).
Same goes for active_admin.rb, nothing was added there either.
Application is now working correctly, loading css and jquery (my 1.7 version, not AA one).
-Michael
The key is to open application.js and application.css and remove the require_tree .. This is a bad default on Rails part because the user should specify load order anyway
Also do not forget to ad these lines in config/initializers/active_admin.rb
# == Register Stylesheets & Javascripts
#
# We recommend using the built in Active Admin layout and loading
# up your own stylesheets / javascripts to customize the look
# and feel.
#
# To load a stylesheet:
# config.register_stylesheet 'my_stylesheet.css'
# You can provide an options hash for more control, which is passed along to stylesheet_link_tag():
# config.register_stylesheet 'my_print_stylesheet.css', :media => :print
#
# To load a javascript file:
config.clear_stylesheets!
config.register_stylesheet "application.css"
config.clear_javascripts!
config.register_javascript "application.js"
Then in you application.js
//= require jquery
//= require bootstrap
//= require bootstrap.switch
//= require bootstrap-tooltip
//= require active_admin/base
....
I'm actually building a new app under Rails 4.
I used to put my javascript_includes_tag at the bottom of my layout. But for an unknown reason, it creates a bug when trying to use confirm: on delete link.
So I put back this line at the top :
!!!
%html{ :lang => 'en' }
%head
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true
So far so good, the bug is now gone. Anyway, since my app is gonna use a lot of Javascript, I still need to load those third part library at the bottom. So, what I did is to only let the Rails library at the top :
// application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
Then I tried to create another js file named third-part and try to do the same as application but including my third part libraries. Unfortunately, it does not work.
// third-part.js
//= require bootstrap
//= require app
//= require app.plugin
How can I add another javascript_includes_tag at the bottom the same way I did for application? Here I mean that on production it will also compress those files.
Thanks a lot for your help
EDIT :
It's actually loading my files well on DEVELOPMENT, but not on my production.
On production I just got <script data-turbolinks-track="true" src="/javascripts/third-part.js"></script> and I can't access the file
I've tried :
config.assets.precompile += %w( third-part.js )
and
rake assets:precompile RAILS_ENV=production
but it still not working
EDIT 2 :
I made a test of precompliling on production mode from my local machine. It did work. It might be a problem with my server.
EDIT 3 :
Just earse my application from server and clone a new one from my Github but it's still not working. Don't know why :(
In your config/environments/production.rb add this line to precompile the external assets
config.assets.precompile += ["third-part.js"]
and don't forget to mention env=production while precompiling assets on production.
In order to keep controller specific JavaScript logic out of the standard application.js and only have it included by the relevant controller, I'm putting it in its own .js file and including it based on the controller name from the layout like such:
<%= javascript_include_tag "application", params[:controller] %>
That works just fine, but when I deploy the app to production (I'm using Capistrano and have a pre-compile task set up), the asset pipeline doesn't precompile any of the controller specific JS files. I presume this is because my actual JavaScript file isn't referenced by require directives in application.js.
How do I deal with this without moving my controller specific JS back to application.js, or explicitly referencing it from application.js?
Is there some way to tell the asset pipeline to pre-compile an additional list files? How could I manually pre-compile a specific file on production?
Update
As it turns out, you can specify individual files here in your config/environments/production.rb:
config.assets.precompile += %w( achievements.js )
...or I just went ahead and capriciously added it for every JavaScript file:
config.assets.precompile += %w( *.js )
If you want to precompile the js|css only found in the root of assets/javascripts and assets/stylesheets directories (and not their tree hierarchy), you can put this in environment files :
Dir.chdir "#{Rails.root}/app/assets/javascripts"
a = Dir.glob("*.{js,coffee,erb}")
Dir.chdir "#{Rails.root}/app/assets/stylesheets"
b = Dir.glob("*.{css,erb}")
config.assets.precompile += a.concat(b)
Dir.chdir Rails.root
I think you and james_schorr are not really talking about the same thing.
You need to add the files other than application.js to config.assets.precompile. His answer was more about the directory structure you could/should adopt, if I'm not mistaken.
If I wanted to have controller specific, I would do:
/assets
/javascripts
/users
login.js
profile.js
/blogs
/posts
users.js
blogs.js
posts.js
And for instance, users.js would be:
*= require_tree ./users
That way, you can stay organized (have a lot of js files per controller), but in prod, they will all be included in one file.
Still need that in your config:
config.assets.precompile += %w( *.js )
This is what I do:
directory structure:
app/assets/javascripts/sessions/multiple.js
app/assets/application-sessions.js
application-sessions.js just has:
*= require_self
*= require_tree ./sessions
Then in your view, do
<% if #current_controller == 'whatever' %>
<%= javascript_include_tag "application-sessions" %>
<% else %>
….
<% end %>
FYI, #current_controller = controller_name in my application_controller.rb methods, called with a before_filter.
I am having same issue here, it's an headache to me.
Including *.js is a little too much, I don't want every files to be compiled into separated files, some of them suppose to be merged together.
My idea is, store the controller specific files into a sub directory, such as "controllers", and then only include controllers/*.js or css files for precompile.
Not sure if it work or not, I will try it out, anyway, it might be a useful hint.