1. Introduction

Goal of the Tutorial

This tutorial aims to equip you with the skills to manage assets and utilize the Asset Pipeline in Rails effectively. By the end of this tutorial, you should be able to compress and compile JavaScript and CSS assets, which will greatly enhance your website's performance.

Learning Outcomes

• Understanding of the Asset Pipeline in Rails
• How to manage assets
• How to compress and compile JavaScript and CSS assets

Prerequisites

For this tutorial, you will need a basic understanding of Ruby on Rails, HTML, CSS, and JavaScript. Knowledge of Rails conventions is also required.

2. Step-by-Step Guide

The Asset Pipeline is a feature in Rails that concatenates and minifies or compresses JavaScript and CSS assets. It also adds the ability to write these assets in other languages such as CoffeeScript, Sass, and ERB.

Compressing and Compiling Assets

To compress and compile assets, Rails uses the rails s command, which starts a server and applies the default compression and compiling process.

In your Rails application, you can find your assets inside the app/assets directory. Here, you will find three subdirectories: javascripts, stylesheets, and images.

3. Code Examples

Example 1: Adding a new JavaScript file

1. Inside the app/assets/javascripts directory, create a new file, custom.js:

// This is a custom JavaScript file
console.log("Hello, Rails!");

1. Then, include it in the app/assets/javascripts/application.js file:

//= require custom

Example 2: Adding a new CSS file

1. Inside the app/assets/stylesheets directory, create a new file, custom.css:

/* This is a custom CSS file */
body {
  background-color: lightblue;
}

1. Include it in the app/assets/stylesheets/application.css file:

*= require custom

4. Summary

In this tutorial, we have covered the basics of managing assets and using the Asset Pipeline in Rails. We have learned how to add custom JavaScript and CSS files to our Rails application and how to compile and compress these assets.

To expand your knowledge, you can explore how to write assets in languages like CoffeeScript, Sass, and ERB, and how they are preprocessed through the Asset Pipeline.

5. Practice Exercises

1. Exercise 1: Add a new JavaScript file that logs a different message to the console.
2. Exercise 2: Add a new CSS file that changes the font of your entire website.
3. Exercise 3: Try to add an image to your Rails application and use it in your CSS file.

Here are the solutions for the above exercises:

1. Solution 1: Create a new JavaScript file, exercise.js, with the content console.log("This is a different message!");, and include it in application.js.
2. Solution 2: Create a new CSS file, exercise.css, with the content body {font-family: Arial;}, and include it in application.css.
3. Solution 3: Add your image to app/assets/images, and in your CSS file, use background-image: url(asset-path('image.jpg'));.

Keep practicing and exploring different features of the Asset Pipeline in Rails. Happy coding!