The Rails 3.1 Resource Pipeline and manually ordered Javascript require

Question

I am trying to convert an existing application into a new asset pipeline 3.1 layout and want to include a lot of provider files in it, which should be in a certain order (underscore.js and the core network - one pair). Thus, I cannot just use = require_tree . to download files from your provider (without renaming each file with the Yuck prefix).

In my app/assets/javascripts/application.js file is the following:

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

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

I feel like I'm stupid because it seems like such an obvious use case (including certain files by name in the proper JS order, no?), What should I do something stupid?

Answer 1

You can require each file in a specific order, and then add:

 //= require_self 

instead:

 //= require_tree . 

Answer 2

You have two possible structures: the first and second. In both of the examples below, you will find the package in /assets/externals.js . You can javascript_include_tag this package, but you can also require it in your application.js file.

The first

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

The externals.js file contains:

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

Second

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

The index.js file contains:

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

Answer 3

My answer relates to Rails 3.1rc4, I don’t know if it will work with other versions.

You can put all the required statements in app / assets / javascripts / application.js regardless of whether the .js files are in app / assets / javascripts / or vendor / assets / javascripts /

Same:

 // this is in app/assets/javascripts/application.js //= require modernizr-2.0 //= require jquery //= require jquery_ujs //= require jqueryui-1.8.12 //= require jquery.easing-1.3 //= require jquery.noisy //= require jquery.jslide-1.0 //= require respond //= require smoke //= require_tree 

I have included require_tree here because I have other javascript files for my individual controllers (pages.js.coffee, users.js.coffee) and shared across the whole site (site.js.coffee)

Meanwhile, here is the file structure.

 app/ ├── assets │ ├── javascripts │ │ ├── application.js │ │ ├── pages.js.coffee │ │ ├── users.js.coffee │ │ └── site.js.coffee │ └── stylesheets └── plugins vendor/ ├── assets │ ├── javascripts │ │ ├── jquery.easing-1.3.js │ │ ├── jquery.jslide-1.0.js │ │ ├── jquery.noisy.js │ │ ├── jqueryui-1.8.12.js │ │ ├── modernizr-2.0.js │ │ ├── respond.js │ │ └── smoke.js │ └── stylesheets └── plugins 

This allows me to control the loading order of the provider libraries (which is very important, as a rule), and not to worry about my internal javascript, where the order is generally less.

More importantly, I control all the demanding statements in one frequently used file, I believe that it is safer and cleaner.

Answer 4

I believe you can put library.js in your vendor/assets/javascripts and then just

 //= require library.js 

from your application.js , no?

Answer 5

require_tree does exactly what you say. If you give him

 //= require_tree . 

it uploads files to the current directory where require_tree is called. If you give him

 //=require_tree ../../../vendor/assets/javascripts 

then you will get javascript under the provider.

I did not like the entry .. / .. / .., so I created a file called vendor / assets / javascripts / vendor_application.js that contains:

 //= require_tree . 

Loads javascript into the provider directory.

Note. require requires a search in 3 pipeline locations (app, lib, vendor) for the required file. require_tree is literal, which is probably what it should be.

The rails on this are very useful: http://railscasts.com/episodes/279-understanding-the-asset-pipeline