background preloader

The Asset Pipeline

The Asset Pipeline
1 What is 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. The asset pipeline is enabled by default. You can disable the asset pipeline while creating a new application by passing the --skip-sprockets option. Rails 4 automatically adds the sass-rails, coffee-rails and uglifier gems to your Gemfile, which are used by Sprockets for asset compression: Using the --skip-sprockets option will prevent Rails 4 from adding sass-rails and uglifier to Gemfile, so if you later want to enable the asset pipeline you will have to add those gems to your Gemfile. 1.1 Main Features The second feature of the asset pipeline is asset minification or compression. More reading:

Asset Pipeline for Dummies - coderberry The Rails asset pipeline is very powerful, but often misunderstood. 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. Not any longer. I reference the word asset a lot in this article. In this article, I want to simplify the asset pipeline so it is better understood. Purpose The asset pipeline has three goals: precompile, concatenate and minify assets into one central path. Moving Parts The asset pipeline is powered by two technologies: Sprockets and Tilt, the latter being a dependency of the former (look at your Gemfile.lock if you don’t believe me). Sprockets performs the asset packaging which takes the assets from all the specified paths, compiles them together and places them in the target path (public/assets). Tilt is the template engine that Sprockets uses. Asset Paths The Manifest Usage Misconceptions No.

Nested model form in Rails 4 - iRoller's notes Quick guide on how to build a simple survey application using Rails 4 and simple_form. There are some good topics on it on RailsCasts (Rails 3 and no simple_form): And also a bunch of questions answered on stackoverflow. Please use the official documentation to understand things you’re doing I just want to cover the most basic setup. I’m going to use haml instead of erb and simple_form for creating forms. Install all required gems using bundler We’re going to use has_many and belongs_to associations as the simplest for our case. Create additional columns First of all we need to create and additional column inside anwers and questions database tables containing an ID of associated object Run migrations Run migrations to get tables actually created Create associations between models Then we need to add the associations to our models. Edit app/models/answer.rb Edit app/models/question.rb Edit app/models/survey.rb Edit controllers Edit views

Unholy Rails: Adding JavaScript to Rails by Daniel Kehoe Last updated 31 December 2012 Rails and JavaScript topics: How to include external JavaScript files and jQuery plugins in Rails 3.1 or newer. What is the best way to add a JavaScript library to a Rails application? If You Are New to Rails If you’re new to Rails, see What is Ruby on Rails? What is the RailsApps Project? This is an article from the RailsApps project. Contents Rules of Thumb In summary, here are rules of thumb to guide your use of JavaScript in Rails: Logically organize your site-wide scripts in the app/assets/javascripts/ folder. In almost all applications, there is no need to add external JavaScript libraries directly in a view template. The Rails asset pipeline will become even more important in Rails 4.0 with the new Turbolinks feature. Principles for Performance It’s difficult to sort out all the advice and folklore around Rails and JavaScript. JavaScript is single-threaded, meaning that only one operation can be performed at a time. Mysterious Manifests

bootstrap-ruby/bootstrap-editable-rails A Simple Pattern to Namespace and Selectively Execute Certain Bits of JavaScript Depending on Which Rails Controller and Action are Active | Jerod Santo 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. 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. 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. 2) Add a JavaScript controller for each Rails controller

Working with nested forms and a many-to-many association in Rails 4 - Created by Pete Recently a project I was working on needed a many-to-many relationship that would also store some extra data in the pivot table. Rails provides helpers to make working with this sort of relationship a breeze but when you start to include the nested forms and requirement to add data to that connecting table the solution may not be that obvious. I'll be using Rails 4, the code will be the same for Rails 3.2 for the most part the major difference is Strong Parameters is now used in place of attr_accessible. You can find out how to install Rails 4 yourself here. For this example I'm going to use a Survey application, unfortunately this was a survey done in the street on paper and now the results need to be manually added to the system. Each Survey will have some Questions, these Questions will be answered by a Participant. So let's start a new Rails application. Generate some models and scaffolds to save a little bit of typing later. The behind the scenes work is done so lets sort out our views.

12 Tips for the Rails Asset Pipeline | 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. 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 And you want to include this in your page. 2. 3. 4. 5. 6. 7. 8. 9.

Customizing Devise views in Rails ruby on rails - Add folder to asset pipeline path? 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. 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. Ultimately, this felt like a hack. 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. Bower allows us to configure the directory it stores its files via the .bowerrc file. Configuring Rails Now that the assets were in a logical place, we wanted Rails to be able to find them easily without us having to manage an army of symlinks. Using Bower Assets Alternatives

Rails Asset Pipeline - Everything You Should Know What is the asset pipeline? 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. 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: the basics of how to use the asset pipelinebest practices for structuring where to put your assetshow to use the precompile array to specify what files are processed by the asset pipelinehow Sass and Coffeescript can be leveragedhow to use Rails asset helper methods, andsome gotchas Basic Usage File Structure Precompilation

Related: