Introducing asset pipeline

The styling, scripts, images are called assets.

Managing and loading assets has been a big issue for web designers.

There are a lot of inconvenience when managing assets ourselves, here are the major issues.

1. Source file on dev; minification files on production.
2. Separated files for components in dev; one file for HTTP request optimization in production.
3. Writing preprocessing scripts in dev; requiring HTML/CSS/JS in production.

Asset pipeline solves all the above issues.

And one mode thing, finderprint in asset pipeline optimizes the assets caching and invalidation.

asset pipeline optimizes the assets caching and invalidation

For more information on finderprint, check the rails guide.

Normally, the assets are located in the app/assets/ folder. By default, JS and CSS files are automatically loaded when inside the app/asstes/javascripts/ and app/assets/stylesheets/ folder.

Image files inside app/assets/images folder can be reference with image_tag:

<%= image_tag  'file_name_here.png' %>

Third party assets can be placed in the app/vendor/assets/ forder. The files here will be correctly loaded.

By default, rails comes with jQuery ready so we do not need to include our own jQuery script.

Note: in older rails version, jQuery is not a default loaded library.

Preprocessing let us write the HTML/CSS/JS code in a higher level. You can think it improves those languane to some points. Leting us writing them easier, faster, less bugs.

For HTML, we have HAML and Slim choices.

For CSS, we have Scss, Less and Stylus.

For JavaScript, we have CoffeeScript.

What’s next? We’re going to take a look at “Ruby on Rails 101 – Chapter 6”.