Asset Pipeline

What is an Asset pipeline?

The Asset pipeline is in charge of: Concatenation and Minification or Compressing Javascript and CSS files.

Explain:

1. Concatenation : Merge multiple files into one file.
2. Minification : the process of removing all unnecessary characters from the source code of the interpreted programming language or markup language without changing its functionality.
3. Compress : A compression handler for CSS and Js.

The force behind the Asset pipeline is the gem sprockets-rails , from the version of Rails 4 Asset pipeline installed and enabled by default.

What does Asset Pipeline bring to Rails?

When we use any technology or technique there is always a reason for the question “ Wow, why use it? “. Let’s take a look at 3 outstanding features given by Rails to answer this question.

Concatenate assets

Literally translating is to concatenate properties – properties here are interpreted as your css and js files. Can be redefined as: merge css and js files. More specifically, all the CSS files in your application will be merged into a single file, as is Js.

Benefit : This minimizes the request to the server to download css and js files. Since everything is put together, it will only take one request. The files will be cached on the user’s browser. If you notice the request with the GET method will be browser, http server (Apache, Nginx) cached if the request is the same (including files like css, js, image, …).

This approach has a problem: since we only change the contents of the files while the name of the file has not changed, the browser or http server will not know if the file has changed. This will return the user the file from the cache, not the latest one.

To solve this problem, the Asset pipeline uses Fingerprinting : If the file contents change, the name of the file will also change. Rails adds a SHA256 code snippet to the name of the file. Example: global-908e25f4bf641868d8683022a5b62f54.css

So whenever the content changes, the browser and http server will know the change by the name of the file.

Minification or compress assets

Minimize or compress files. The purpose is easy to understand, making the file smaller for faster transfer. Minimize here can be understood as removing whitespace, or unnecessary line breaks. This is quite simple with CSS but quite complicated for Js.

Support SASS, CoffeeScript, ERB

This allows you to write CSS and JS in a higher level language like SASS for CSS or CoffeeScript for JS, or ERB for both 2. Before applying the Asset pipeline, they are supported by Rail to compile into CSS and JS. . That’s why we use Rails .scss, .coffee files very easily. No need to care about compiling scss to css before using it.

How to use the Asset Pipeline

In previous versions of Rails, all assets are stored in public folders such as images, stylesheets, javascript. But currently they are stored in the directory app / assets. The files in this directory will be served through the Sprocket middleware .

Assets can still be stored in the public directory, but they will be treated as static files by the application or web server when config.public_file_server.enabled = true . You should put the files to precompile in the app/assets directory before they can be used.

Note: In a production environment, Rails precompile the files in the app / assets directory into public / assets. Then the directory app / assets will be used instead of app / assets.

Manifest files and Directives

To control which files the asset pipeline will serve and what are the order of those files? We need to know Manifest Files and Directives .

Note:

• Manifest files are files that contain Directives .
• Directives are instructions for the files that are needed into the asset pipeline.

Very easily we can see in Rails that app/assets/stylesheets/application.scss(.css) is the Manifest file.

I will not mention js in this post because Rails 6 uses Webpacker instead of Asset Pipeline for Js. The Directives are as follows:

• require_tree : instructs the Asset pipeline to load all the files in the current directory. Even files in a subdirectory of the current directory.
• require_self : Load the current file itself. In the above example is application.scss.
• require : Load the specified file.

Note : If you want to load .scss files, please use import instead of directive. For some reason related to scope variable, scss’s mixin.

The default sites use the Asset pipeline

We ask the question, if only with the Manifest file and directive as above, the Asset Pipeline will download the file and where?

Asset Pipeline default will look for the files you specify in Manifest in 3 places and are in order of priority: app / assets, lib / assets, vendor / assets. A file in a directory with a higher priority will have a file of the same name and a file in a directory with a lower priority. The most common ones we use are app / assets. It is possible to add other folders. For example: Currently we have the following css files.

The manifest file would look like this:

Note: You can check the path that Asset Pipeline searched to check if there are files you want by using: Rails.application.config.assets.paths in the rails console. For example :

Foam differences between development and production environments

Development environment

The files specified in the manifest app/assets/stylesheets/application.scss will be loaded separately. Not through files processed with the Asset Pipeline. Test your application easily in the browser.

Production environment

As mentioned above, in the production environment, we will not use the files in the app/assets directory, but the file processed by the Asset Pipeline stored in public/assets .

When you deploy to a production environment there is always a command that will run if your project is not already precompile.

rake assets:precompile

Or you can do a precompile locally with the command: RAILS_ENV=production rails assets:precompile

Result:

All the individual files in the app / assets directory will be merged into application-xxx.css. This file will be used in your application.

How to use the Asset pipeline with files font, image, video, audio, …

When you use the Asset pipeline with files such as fonts, images, videos, audio, …, it must be used through the helper provided by sass-rails. If you are not careful, you will run into a situation where under the develop environment your application runs well but when switching to a production environment, there are errors in css, fonts, images, videos … all over the place.

For .scss we use “-“: image-path, image-url, font-path, font-url, … or simply asset-path, asset-url (They will take care of everything. back to you). A very easy to understand and simple article below will guide you to use the Asset Pipeline with fonts.https://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets https://coderwall.com/p/v5c8kq/web-fonts-and-rails-asset-pipeline

Conclude

All information in the article serves the purpose of providing the most basic information about Asset Pipeline in Rails, hope you read somewhat more about how to handle files below Rails in particular and Rails in general.

Thanks for reading to my post!

Refer

1. https://guides.rubyonrails.org/asset_pipeline.html