Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:14Length:2.4 hours
  • Overview
  • Transcript

2.6 The Asset Pipeline

A modern web application requires the delivery of CSS and JavaScript files to client computers. This allows the application to be styled, and allows for execution of code in the client browser. In this lesson, we’ll learn Rails’s unique way of handling these files.

Related Links

2.6 The Asset Pipeline

In the previous lesson, we've managed to implement a commenting system to our tasks. From the projects, to the tasks, to the comments, we have a solid relationship between all of those entities. Now, as you can see, the page looks a little ugly. Well, not exactly the worst thing that could happen. But my guess is we could improve this a lot more. For example, we could add a navigation on top, or we can just spruce things up with a little bit of CSS or JavaScript. This is the perfect opportunity for me to explain you about the asset pipeline. Let's go to our editor really quick. I'm going to go to the app assets folder. Inside you will see an images folder, a JavaScripts folder, and a stylesheets folder. These will hold all of the stylesheets, JavaScripts, and images, respectively, in our application. Instead of resorting to static files in the public folder, Rails has the opportunity to store those application files in their own folders and then when trying to reach out to them, only a single file is read. Take the example of the stylesheets folder. Now let's go back to our browser and check the source for this specific page. As you can see, we have a bunch of different CSS files. They all match each and every specific file. The same goes for JavaScript files. You can see jQuery, The UJS files from Rails, turbolinks, and all of that good stuff. However, if you go, for example, to the layout page, let me just open that up under app > views > layouts > application, you can see that we only have one file of each. Well, that's pretty odd. Why is it that we are just referring to one single tag declaration, but we get four different references in the final output? Well, the behavior behind the scenes is a little bit complex, but to put it short, Rails reads your environment settings, and based on whether it's development or production, you either return a single file or a bunch of them for development purposes. Since we are using development, you will see all of the files being individually rendered. In case you want to change one of the files, then that file is automatically renewed. So that's the main reason. And they work for both CSS and JavaScript files. Should you perform a change in the JavaScript files, you can also do that. The risk is minimum in development. In a production-like environment, you will have a task to render all of these CSS and JavaScript files into a single one, which will then be referenced by this very method. Either one or the other, depending on what we're looking at. We will only have one file called application.css, and one filed called Application.js. As you can see, on the left side, we have one CSS file and three Sass files. Let's open the CSS file first. This file contains a manifest. This is the way that Rails handles all of this behavior behind the scenes. The CSS file would require the entire tree of files in the current directory, so the stylesheets directory, and it will also require itself. So if you want to have a generic rule in here, for example, changing the body color, if I change this black to blue or something and I reload this, the whole text will be blue. There you go. Let me just put it back on again to black, but basically I wanted to show the behavior of require_self. It will require every single file in the stylesheets folder and also its own set of rules. So what if you want to change something in our application? What if you want to perform a change? Perhaps give it a color, or change the width, or something. I'm gonna go to, for example, the scaffolds.scss file and you can see that it already has loads of different stuff, declarations for the body, paragraphs and lists, links, and code blocks, also some styling for the errors when trying to save a model. You can take a look at these by checking the source code. Now we can go ahead and add in some more changes. In fact, instead of changing this file, I'm going to add another one. I'm going to creat an app.scss file. This file will also be included, but for the time being, it doesn't have anything. Let's take care of that really quick. I'm going to create a container div. Let's say, for example, that we're gonna have a div that encloses the content in between a specific width, so I use margin 0 auto, for example, and then specify a width. Let's stick to 960 pixels. I think this is a good measure for the entire app to be enclosed in. Now, as for this container div, we're gonna have to include it in the layout, so we're going to views > layouts > application, and we're going to enclose the entire thing with a div with the ID of container, and there you go. And just remove all of that extra space, save the file, and now I can go straight to whatever page I want. It is going to be enclosed in that 960 pixel width. If I go to the project, it will also be enclosed, and the list of projects will be there as well. So this container div will enclose the entire content, regardless of what page we're in. We'll learn about different layouts in the next lesson. But for now, I wanted to show you this in regards to the asset pipeline. In the assets folder, under stylesheets, this file was included automatically. You didn't need to include this by hand anywhere else. As for the JavaScript folder, we can also create our very own JavaScript files. Either JavaScript or Coffee files, remember that. The same goes for CSS files. You can change this to CSS and it will also be included. In fact, if I reload the page, there's no change. Okay, let's go back to the JavaScript. I'm going to create a hello.js file. I'm really not a huge fan of CoffeeScript but you can always choose to implement that. If you want documentation on how to develop using CoffeeScript, check the link in the description below. For now, in the hello script, I'm going to create a function here that will be loaded by jQuery. So this is a jQuery handler for when the document is ready and loaded. I'm just going to create an alert message saying hello. This is a rather obnoxious function. The alert message is really, really not the best thing you can do, but for the sake of the example, this should work. Remember that I'm not declaring anything anywhere. The the application.js file will take care of that by requiring the list of files in this tree in this folder. Besides that, we're also including jQuery, the Rails files for jQuery, and turbolinks. Now let's go ahead and reload this page, and when we do, we get the hello message. So that's basically it on CSS and JavaScript. What about the images, you say? Well, let's go ahead and do that, let's fix that. As you can see, I have put an image inside the images folder. How do I access it in our application? Well, let's go to the application file here, and I'm simply going to create an image tag by using image tag And then we pass in a source, and, for example, a title. The way you access an image inside the assets folder is by typing asset_path with the respective path. So if I type in office-2.jpg, I should get that. I'm going to type in a width variable, which should be something in the terms of maybe 120 pixels. Let's see if this works by going to the browser and reloading. As you can see, the JavaScript alert is still there, but look as the image is right there is present. So using the asset_path will directly give us the correct image. So if there's any image with this name, it is going to be correctly passed and properly rendered. So there you go, that's the asset pipeline. Remember that in the production environment that you'll deploy your application to, this will automatically be taken care of. So I've mentioned before about the possibility of having a different layout file, depending on what you're seeing. We're going to take care of that in the next lesson. Jump right in.

Back to the top