After Thought

Posts Tagged ‘Rails

Include vendor java scripts and style sheets in Rails 3.1

with 2 comments

In rails 3.1 any external javascript/stylesheet plugins (like tablesorter.js etc) that you use in your project are placed in vendor/assets directory. To include it in your rails application, add a vendor.js and vendor.css.scss file as shown below in your assets/javascripts and assets/stylesheets directory.

vendor.js:

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require_tree .

vendor.css.scss:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree .
*/

Now update your application.js and application.css.scss files to include vendor.js and vendor.css.scss respectively.

application.js:

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require vendor
//= require_tree .

application.css.scss:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require lib
 *= require vendor
 *= require_tree .
*/

Now you can add files to your vendor assets directory and it will be picked up your rails app. Being a beginner in rails, I found this way very effective as I don’t have to update my application.js file once set. I would be interested to know if there is a better way of handling this.

Advertisements

Written by shashankshetty

November 6, 2011 at 8:20 pm