How to include javascript file only once?

Question

I am using pace.js library and its documentation says, that I need to include their JS/CSS file as early as possible. http://github.hubspot.com/pace/ . I did it and now my application.html.erb looks this way:

<head>
  <%= javascript_include_tag "pace.min" %>
  <%= stylesheet_link_tag "pace", :media => "all" %>

  <title>My site</title>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
</head>

But when I look at generated HTML I can see that pace is being included twice. First time at the begining of <head> and second time in place of javascript_include_tag "application" How to prevent it?

Kirti Thorat · Accepted Answer · 2014-02-25 15:37:37Z

3

First time pace.js is included because of <%= javascript_include_tag "pace.min" %> statement where you have explicitly specified to include pace.js library.

And second time because of the following statement in application.js

//= require_tree .

This statement means that include all the js files in the current directory of application.js(app/assets/javascripts) and I am guessing that you have kept pace.js in the same directory which is why it is being included again.

EDIT

Use stub directive in application.js, if you want to exclude pace.js from the asset bundle and include it explicitly in <head>. This way pace.js would only be included once.

//= stub pace

edited Feb 25, 2014 at 15:37

answered Feb 25, 2014 at 14:26

Kirti Thorat♦

53.1k9 gold badges105 silver badges108 bronze badges

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

1 Comment

yaru Over a year ago

If I simply allow Rails itself to include it (via //=require_tree .) then pace.js will be included as JS file #40, but to work properly pace.js library is required to be included at the top of <head> section

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

There are also 2 gems setup for pacejs and rails

1

pacejs_rails gem

2

pace rails gem

alternatively, in your application.js file, list the order in which you need them

//= require pace
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require_tree .

where the tree will then grab everything else in order.

Pace would be included before the others listed

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 25, 2014 at 15:37

emcanes

1,39810 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to include javascript file only once?

2 Answers 2

1 Comment

1

2

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1

2

Comments

Your Answer

Sign up or log in

Post as a guest

Related