javascript - Twitter bootstrap jquery plugins not compiled for production

Question

I'm developing a 3.1 Rails app with Twitter Bootstrap using seyhunak's gem.

On the production mode, I was able to use basic bootstrap CSS and JS through pipeline precompilation:

RAILS_ENV=production bundle exec rake assets:precompile

Using the gem file :

group :assets do
  gem 'sass-rails',   '~> 3.1.5'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
  gem "twitter-bootstrap-rails"
end

And the application.js file:

//= require_tree .

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-tab
//= require bootstrap-modal
//= require bootstrap-dropdown
//= require bootstrap-popover

The application worked fine except for for the bootstrap plugins such as modals and dropdowns. These plugins exist as static javascript libraries existing inside the vendor assets directory:

/vendor/assets/javascripts/bootstrap-dropdown.js
...

I'm not sure whether these files are being precompiled or not, how can I manage to do so?

Answer 1

Found it!

It wasn't a problem of bootstrap, but rather with properly precompiling jQuery. As well as there is no need for including the javascript files for individual plugins. They are already included in the main twitter/bootstrap.

Problem was solved by re-arranging the javascripts files as follows:

application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap

Gemfile

group :assets do
  gem 'sass-rails',   '~> 3.1.5'
  gem 'coffee-rails', '~> 3.1.1'
  gem 'uglifier', '>= 1.0.3'
  gem "twitter-bootstrap-rails"
end

gem 'jquery-rails', '>= 1.0.12'

Precompling the assets and worked!

Answer 2

In your /vendor/assets/javascripts place a file vendor_js.js with the following content:

//= require_tree .

Now in your /app/assets/javascripts/application.js include a line

//= require vendor_js

You can customize the vendor_js.js to only include specific vendor plugins, e.g. by using //= require bootstrap-dropdown to include only the bootstrap dropdowns within the vendor javascripts directory.

UPDATE TO REFLECT COMMENTS

Since you put the bootstrap JS files into vendor/javascripts manually, please remove all bootstrap-related requires from your application.js and paste them into vendor_js.js as noted above. Make sure you get the path right (in case you put the files in a subdirectory). Also make sure to include each file separately and place the inclusion of tooltip before popover, since popover depends on tooltip to be loaded first.