Asset Pipeline In Rails 3.1.0


Asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages such as Coffee Script, Sass and ERB. In Rails 3.1, the rails asset pipeline is enabled by default. It can be disabled in config/application.rb by putting this line inside the application class definition:

config.assets.enabled = false

we can also disable the asset pipeline while creating a new application by passing the —skip-sprockets option.

rails new appname –skip-sprockets

Features of asset pipeline:
1.Concatenate assets

This feature is important in a production environment, because it can reduce the number of requests that a browser must make to render a web page. Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for application.

Rails 2.x introduced the ability to concatenate JavaScript and CSS assets by placing :cache => true at the end of the javascript_include_tag and stylesheet_link_tag methods. But this technique has some limitations. For example, it cannot generate the caches in advance, and it is not able to transparently include assets provided by third-party libraries.

Asset Pipeline In Rails 3.1.0

2.Asset minification or compression

For CSS files, compression is done by removing whitespace and comments. For JavaScript, more complex processes can be applied. we can choose from a set of built-in options or specify our own.

3.It allows coding assets via a higher-level language, with precompilation down to the actual assets.Supported languages include Sass for CSS, CoffeeScript for JavaScript, and ERB for both by default. In older versions of Rails asset pipeline, all assets are located in subdirectories of public such as images, javascripts and stylesheets.

With the asset pipeline, the preferred location for these assets is now the app/assets directory. Files in this directory are served by the Sprockets middleware included in the sprockets gem. Assets can still be placed in the public hierarchy. Any assets under public will be served as static files by the application or web server. we should use app/assets for files that must undergo some pre-processing before they are served.

In production, Rails precompiles these files to public/assets by default. The precompiled copies are then served as static assets by the web server. The files in app/assets are never served directly in production.

When we generate a scaffold or a controller, Rails also generates a JavaScript file (or CoffeeScript file if the coffee-rails gem is in the Gemfile) and a Cascading Style Sheet file (or SCSS file if sass-rails is in the Gemfile) for that controller.

Asset Organization:

The biggest practical difference between Rails 3.0 and Rails 3.1 apps is a change in the location of asset files such as images, stylesheets, and JavaScript files. In previous versions of Rails asset pipeline, these files all lived in the public/ directory:

public/images/

public/stylesheets/

public/javascripts/

In Rails 3.1, and Rails 3.2.3 the location of these files differs based on whether they are created by us or come from an external vendor. In this case the files live in the app/assets directory:

app/assets/images/

app/assets/stylesheets/

app/assets/javascripts/

In the case of code or images from external vendors, we use the vendor/assets directory:

vendor/assets/images/

vendor/assets/stylesheets/

vendor/assets/javascripts/

Manifest files

These are plain js or css files containing directive processors, comment lines followed by a =

// …

//= require jquery

//= require jquery_ujs

//= require_tree .

Or:

/* …

*= require_self

*= require_tree .

These manifest files reference and include other assets that they depend on. require_directory and require_tree lets we require whole directories and their children, require_self also includes any js or css in the manifest file itself.

Source : RailsCarma

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s