Rails asset pipeline - custom js files

Question

I have couple of js files in application.js file. Such as;

//= require jquery //= require jquery_ujs //= require dropzone //= require jquery.cookie //= require toastr //VENDOR JS BEGINS //= require pace/pace.min //= require modernizr.custom //= require jquery-ui/jquery-ui.min //= require boostrapv3/js/bootstrap.min //= require jquery/jquery-easy //= require jquery-unveil/jquery.unveil.min //= require jquery-bez/jquery.bez.min //= require jquery-ios-list/jquery.ioslist.min //= require jquery-actual/jquery.actual.min //= require jquery-scrollbar/jquery.scrollbar.min //= require bootstrap-select2/select2.min //= require switchery/js/switchery.min //= require imagesloaded/imagesloaded.pkgd.min //= require jquery-isotope/isotope.pkgd.min //= require classie/classie //= require codrops-stepsform/js/stepsForm //= require bootstrap-datepicker/js/bootstrap-datepicker //= require bootstrap-datepicker/js/locales/bootstrap-datepicker.tr.js //= require bootstrap-datepicker/js/locales/bootstrap-datepicker.en.js //= require summernote/js/summernote.min //= require moment/moment-with-locales.min //= require bootstrap-daterangepicker/daterangepicker //= require bootstrap-timepicker/bootstrap-timepicker.min //= require codrops-dialogFx/dialogFx //= require ion-slider/ion.rangeSlider.min //= require owl-carousel/owl.carousel.min

I have also couple of js codes in the html.erb pages. But I want to take all page specific js codes into 1 file. This file should be called after page loads. Because some of them uses ruby code such as init lat lng of google maps. Also, couple of js files such as;

 //= require codrops-dialogFx/dialogFx //= require ion-slider/ion.rangeSlider.min

works after page loads. So, they do not work as I put them to head tag as;

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

So If I, design application.js as;

//= require jquery //= require jquery_ujs //= require dropzone //= require jquery.cookie //= require toastr

Then call <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> in head tag then call all the other js files in the body tag like

<%= javascript_include_tag 'pace/pace.min', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'modernizr.custom', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'jquery-ui/jquery-ui.min', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'boostrapv3/js/bootstrap.min', 'data-turbolinks-track' => true %> ....

Does rails precompiles these files also?. I have these js files in vendor file.

Anthony E · Accepted Answer · 2016-05-15 12:46:47Z

1

Yes Rails will precompile all files it finds in a javascript_include_tag assuming it can find them within your asset path.

However, it's redundant to add javascript_include_tag for assets which are already declared in your application.js as they'll actually get loaded twice in your HTML.

If you need to include assets outside of the normal load path, you'll need to tell Rails to precompile your custom files in your application.rb:

config.assets.precompile << 'path/to/asset'

answered May 15, 2016 at 12:46

Anthony E

11.3k2 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shalafister's Over a year ago

No, ofcourse I will delete //= require pace/pace.min if I put it like this; <%= javascript_include_tag 'pace/pace.min', 'data-turbolinks-track' => true %>.

Shalafister's Over a year ago

For instance I have loaded individually as; <%= javascript_include_tag 'pace/pace.min', 'data-turbolinks-track' => true %> . Now it gives an error; Asset filtered out and will not be served: add Rails.application.config.assets.precompile += %w( pace/pace.min.js ) to config/initializers/assets.rb and restart your server... So do I have to add all of them like this?

Anthony E Over a year ago

Yup, that's what I meant on the last line of my answer. You can also add folders by using config.assets.paths. So if you wanted to include all of vendor/assets you could do: config.assets.paths << Rails.root.join('vendor', 'assets')

Collectives™ on Stack Overflow

Rails asset pipeline - custom js files

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related