Ruby on Rails - Asset Pipeline

Introduction

The asset pipeline in Rails is a powerful framework that provides a consistent structure for managing and serving assets such as JavaScript, CSS, and images. It enables you to preprocess, concatenate, and minify assets to optimize performance. This guide will cover the basics of understanding and using the asset pipeline in Rails.

Asset Pipeline Basics

The asset pipeline allows you to organize your assets into a logical structure. By default, assets are placed in the app/assets, lib/assets, and vendor/assets directories. Here is the basic structure:

app/assets/
  javascripts/
  stylesheets/
  images/
lib/assets/
  javascripts/
  stylesheets/
  images/
vendor/assets/
  javascripts/
  stylesheets/
  images/
                

Preprocessing

The asset pipeline supports preprocessing of assets. Preprocessors like Sass for CSS and CoffeeScript for JavaScript can be used. Here is an example:

# app/assets/stylesheets/application.scss
@import 'variables';
body {
  background-color: $body-bg;
}

# app/assets/stylesheets/_variables.scss
$body-bg: #f4f4f4;

# app/assets/javascripts/application.coffee
alert 'Hello, Rails!'
                

In this example, Sass is used to preprocess CSS files, and CoffeeScript is used to preprocess JavaScript files.

Manifest Files

Manifest files are used to include and order assets. The default manifest files are application.js and application.css. Here is an example:

# app/assets/javascripts/application.js
//= require rails-ujs
//= require turbolinks
//= require_tree .

# app/assets/stylesheets/application.css
/*
 *= require_tree .
 *= require_self
 */
                

The require directives in the manifest files include all the files in the specified directories.

Helpers for Assets

Rails provides several helper methods for including assets in views. Here are some examples:

<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
<%= image_tag 'logo.png' %>
                

These helpers generate the appropriate HTML tags to include the assets in the view.

Fingerprints and Caching

The asset pipeline appends a fingerprint to the filenames of compiled assets. This helps with caching by ensuring that the filenames change when the content changes. Here is an example:

# Compiled asset with fingerprint
application-4d3ed9c4b6e6b5c8e6e4.js
                

Configuring the Asset Pipeline

You can configure various aspects of the asset pipeline in the config/application.rb file and environment-specific configuration files. Here is an example:

# config/application.rb
module MyApp
  class Application < Rails::Application
    # Enable the asset pipeline
    config.assets.enabled = true

    # Version of your assets
    config.assets.version = '1.0'
  end
end

# config/environments/production.rb
Rails.application.configure do
  # Compress JavaScripts and CSS
  config.assets.js_compressor = :uglifier
  config.assets.css_compressor = :sass

  # Generate digests for assets URLs
  config.assets.digest = true

  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
end
                

Precompiling Assets

In production, you need to precompile your assets to improve performance. Use the following command to precompile assets:

# Precompile assets
rails assets:precompile
                

This command will compile and compress your assets into the public/assets directory.

Conclusion

The asset pipeline in Rails is a powerful tool for managing and optimizing your application's assets. By understanding how to use and configure the asset pipeline, you can improve the performance and maintainability of your Rails applications.