background preloader

Assetrails

Facebook Twitter

Rails Asset Pipeline - Everything You Should Know. What is the asset pipeline?

Rails Asset Pipeline - Everything You Should Know

If you’re building a Rails application, you’ve probably heard of the asset pipeline. The asset pipeline can be thought of as the tools and mechanisms by which Javascript files, stylesheets, and images are processed and prepared for use by the browser. These processes can minify and compress assets, as well as pre-process assets that are written in other languages such as Coffeescript or Sass. The asset pipeline was created to solve a variety of problems related to static assets. One such issue is that each asset specified separately in the HTML markup must be retrieved separately, resulting in a higher number of HTTP requests and, in the end, a longer load time. The asset pipeline, in its benevolence, can solve all of the above problems when used properly.

This post covers a variety of topics related to the asset pipeline: Basic Usage There are two basic ways that the asset pipeline is used: File Structure Precompilation The first option looks like this: Integrating Bower with Rails, Sprockets, and the Asset Pipeline - Joe Lencioni. We tend to prefer convention over configuration, so when we first began using Bower to manage our front-end dependencies, we started with minimal configuration.

Integrating Bower with Rails, Sprockets, and the Asset Pipeline - Joe Lencioni

While this nicely put the files in the expected places, it was a hassle actually using the assets in our Rails app. Our basic initial approach was to symlink the assets that we wanted to reference from the bower_components directory into vendor/assets where Sprockets would notice them. While this worked in the short term, it was tedious to set up new packages, and was likely to break if the required assets were moved when upgrading dependencies. Ultimately, this felt like a hack. We decided that there must be a better way. Configuring Bower To get us out of the clunky situation of managing symlinks, we first wanted Bower to store its files in a Railsy location. Ruby on rails - Add folder to asset pipeline path?

Sydney, Australia Ruby on Rails Developers. Face it, you are a top developer, one of the best at your game, you eat lambda's for breakfast, refactor whole apps as an afternoon snack and bad code just trembles when you approach.

Sydney, Australia Ruby on Rails Developers

You are at the top of your game and nothing stands in between you and the code you desire. Yet, the Rails asset pipeline still trips you up, not once, not twice, but just about every time you try and use it. Here's a list of things that I have learnt that aren't necessarily obvious, that can help you tame this wild and savage beast. 1. Two options, precompile OR include, not both No CSS or JS files will be available to your app through the asset pipeline unless they are included in other files OR listed in the config.precompile directive (see #2 and #3 below). Only application.css and application.js are available by default of all the CSS and JS files. For example, you make a file in the assets folder called: app/assets/stylesheets/site.css.scss.

Customizing Devise views in Rails. Sydney, Australia Ruby on Rails Developers. A Simple Pattern to Namespace and Selectively Execute Certain Bits of JavaScript Depending on Which Rails Controller and Action are Active. Rails 3.1’s asset pipeline compiles all of our JavaScript into a single file which is executed on all pages which include the javascript_include_tag method.

A Simple Pattern to Namespace and Selectively Execute Certain Bits of JavaScript Depending on Which Rails Controller and Action are Active

Most of the time that method is in the layout, which means evey page gets the same bundle of JavaScript. This is great for caching, but not so great for selective code execution. I developed a pretty simple pattern to namespace and selectively execute certain bits of JavaScript depending on which Rails controller action is active. Just do the following: I talk about JavaScript, but my code samples are all in CoffeeScript. 1) Create an application object Let’s write a Rails app for accurately predicting weather patterns. Create app/assets/javascripts/elijah.js.coffee: This is also a nice place to define common methods that will be used all across the application.

All controller-level objects will be namescaped inside this object, so it must be specified first in the application manifest. This example will log “temps init!” Unholy Rails: Adding JavaScript to Rails. By Daniel Kehoe Last updated 31 December 2012.

Unholy Rails: Adding JavaScript to Rails

Asset Pipeline for Dummies - coderberry. The Rails asset pipeline is very powerful, but often misunderstood.

Asset Pipeline for Dummies - coderberry

At the Utah Ruby User Group, most of the attendees aren’t sure how to use it fully in their Rails app. It’s considered as one of the magic features that Rails offers. I admit that I was confused as well and took it’s magic for granted. The Asset Pipeline. 1 What is the Asset Pipeline?

The Asset Pipeline

The 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 and pre-processors such as CoffeeScript, Sass and ERB. The asset pipeline is technically no longer a core feature of Rails 4, it has been extracted out of the framework into the sprockets-rails gem.