Ruby on Rails: How to organize properly JS and CSS files?

Question

I would like to use the SlickGrid plugin in my Rails 3 application. I contains several JS and CSS files that I should include in my HTML page.

It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.

I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?

What is the proper way to include the JS and CSS files when integrating a plugin ?

Answer 1

I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.

Answer 2

Answer by @rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:

{
   "directory": "vendor/assets/components"
}

Then specify libraries in bower.json and run bower install

{
  "name": "appName",
  "version": "0.0.0",
  "dependencies": {
    "bootstrap": "~3.0.0",
  }
}

After components installed, require files in application.js/application.css as usually. e.g.

*= require bootstrap