Rails 3.1 asset pipeline and manually ordered Javascript requires

asset-pipelineruby-on-rails-3sprockets

I am trying to convert an existing app to the new 3.1 asset pipeline layout, and want to include a lot of vendor files that have to be in a specific order, (underscore.js and backbone being one pair). As such, I can't just use a = require_tree . to pull in my vendor files, (without renaming each file with a prefix. Yuck).

The following is within my app/assets/javascripts/application.js file:

//= require modernizr-1.7
//= require jquery-1.6.1
//= require underscore-1.1.5
//= require backbone-0.3.3
//= require_tree .

I have tried every combination of with/out extensions, with/out the require_tree and with/out the relative paths, and nothing works. All of my vendor files are in /vendor/assets/javascripts/.

I feel like I am being stupid because this seems like such an obvious use case, (including specific files by name in an order is common with JS, no?) that I must be doing something idiotic?

Best Answer

You have two possible structure : the first one and the second one. With both following examples, you expose a package at /assets/externals.js. You can javascript_include_tag this package, but you can also require it in your application.js file.

The first one

vendor/
├── assets
│   ├── javascripts
│   │   ├── externals.js
│   │   ├── modernizr-1.7.js
│   │   └── underscore-1.1.6.js
│   └── stylesheets
└── plugins

The file externals.js contains :

//= require ./underscore-1.1.6.js
//= require ./modernizr-1.7.js

The second one

vendor/
├── assets
│   ├── javascripts
│   │   └── externals
│   │       ├── index.js
│   │       ├── modernizr-1.7.js
│   │       └── underscore-1.1.6.js
│   └── stylesheets
└── plugins

The file index.js contains :

//= require ./underscore-1.1.6.js
//= require ./modernizr-1.7.js

Related Solutions

Javascript – Using Rails 3.1, where do you put your “page specific” JavaScript code

The Asset Pipeline docs suggest how to do controller-specific JS:

For example, if a ProjectsController is generated, there will be a new file at app/assets/javascripts/projects.js.coffee and another at app/assets/stylesheets/projects.css.scss. You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

Link to: asset_pipeline

Ruby-on-rails – How to disable logging of asset pipeline (sprockets) messages in Ruby on Rails 3.1

Place the following code in config/initializers/quiet_assets.rb

if Rails.env.development?
  Rails.application.assets.try(:logger=, Logger.new('/dev/null'))
  Rails::Rack::Logger.class_eval do
    def call_with_quiet_assets(env)
      previous_level = Rails.logger.level
      Rails.logger.level = Logger::ERROR if env['PATH_INFO'] =~ %r{^/assets/}
      call_without_quiet_assets(env)
    ensure
      Rails.logger.level = previous_level
    end
    alias_method_chain :call, :quiet_assets
  end
end

Updated: It now works for Ruby on Rails 3.2 too (previous attempt fixes before_dispatch, and now we're going for the root rack call instead)

Update: A proper Rack middleware solution (instead of fragile alias_method_chain) from @macournoyer https://github.com/rails/rails/issues/2639#issuecomment-6591735