Ruby on Rails - Railscasts #279 Understanding The Asset Pipeline

the asset pipeline is probably the biggest feature in rails 3 1 but it can also be the most confusing here I'll demystify some things and show you exactly how it works now a good place to start is this Rails guide which I will link to in the show notes it just covers a lot of the various features of the asset pipeline but here in this episode I'll walk you through some of these awesome features first of all when you have a rails 3-1 application you probably know that if you go into the URL and type in assets application j/s you'll get a file which contains all of your javascript in your app but how exactly does this all work it seems a little bit like magic and if you want to customize this behavior you know you need a better understanding of how it works well let me show you now there's nothing special about the application J's file rails doesn't look at the application J's file name and go oh hey let's treat this as a special file any file that you put under the app assets Java scripts will be just as accessible for example let's make a file here called gradient text and say hello world just like that and now this greeting dot text file is just as accessible as the application J's file now you can move this greeting text file into any one of these asset directories and it will be just as accessible as well there's nothing actually special about these directories either you can even create any other directory here it could be anything you want and place it in here and if you restart your application so that it adds it to the load path then you can access it as well let's try this out I restarted my app in the background and you can see this greeting text file still works even when I reload now the app assets directory isn't the only place you can place assets you can also place them under the Lib directory if you make an assets directory in here you can just move any kind of assets into here as well and they will be just as accessible you can see if we hit reload the file still works the same goes for the vendor directory as well if you make an assets in here you can place assets under the vendor directory just like you would under app assets so what are these other locations are really used for well if you have assets which are not really specific to your application these are good places for them so if you have maybe some kind of jQuery plugin and a javascript file good spot is inside the vendor directory because that is something that's not maintained by you if you have some assets which are maintained by you still but just not specific to the app or maybe they're shared across apps the Lib directory is a good spot for that so in a way part of the asset pipeline is just a bunch of load paths and you can see that here if you type in in the console here if you type in rails application config assets paths you'll get a list of all the load paths for the specific application and we can actually prefix this with the Y command and that will give us some nicer yamo output to view this and you can see here well there's every directory under app assets lib assets and vendor assets in that order but there's an interesting one here at the end which is jQuery Rails vendor assets Java scripts so this is actually from an engine that we included in our application you can see that if you check in your gem file you have the jQuery rails gem loaded up by default here and we can even look inside that gem by using the bundle open command and passing in the name of the gem and that will open it up in the text editor you have specified in your shell so here's that gem and well would you look at that we have a vendor directory here vendor ass heads Java scripts and there's all of our jQuery files that we can load through our asset pipeline so as you probably guessed we can just call asset slash jQuery j/s to reference that jQuery file which is inside of the engine because it's inside of the asset pipeline load path so this gets really interesting because now rubygems and bundler are not just about managing Ruby code now you can manage JavaScript and any other assets in here as well so I wouldn't be surprised if we see more JavaScript libraries being pulled into rubygems so just so we get all the benefits of bundler in the dependency management it provides all right let's go back to our application javascript file here and you can see inside of here that there are comments and these comments are actually significant it's known as a manifest and as managed internally by sprockets so what happens is when a request comes in for the application J's file sprockets takes over looks at the manifest and then compiles together every file that is mentioned in the manifest and includes it before the main file here so it just sends all the files together back to the user now the load path which I showed you earlier works here as well you can see we have a require jQuery at the top and the extension is just optional so they just leave it off but this uses the same jQuery J's file that is inside of the engine so it's using the same load path as the main asset pipeline so we could add any JavaScript file here which is inside our load path such as jQuery UI because that is provided inside of that same jQuery rails gym and we can also mention any of the JavaScript files in here as well such as home and that will end up loading the home J's file here but that isn't necessary because we have this required tree line and the dot represents the current directory so it's going to read to include automatically every JavaScript file which is mentioned inside of this directory and any subdirectories in here as well now you may be wondering how do we exclude certain files from require tree for example let's say we have an admin section on our site and we have a directory here called admin with some JavaScript files which should only show up in the admin section of our site and we don't want the JavaScript files under here to be visible to everyone else in the public site well let me just add an alert message here saying something so that we can just see if this file is being loaded now you can see if I reload this home page here I'm going to get that alert message because I'm using acquire tree and is loading all the admin javascript files in here but you might not want that you might want the public side of the site to only load certain other JavaScript files and by the way if you want to see all the files which are being loaded you can call a parameter on here in the URL called debug assets and set it to one and then after we remove this alert let's check the source here and you can see that this is going to split up all these sources which are being loaded in through sprockets and that way you can see exactly which files are being included here and you can see our admin categories is being included now there are a few ways we can get around this problem one is to use require directory instead of required tree and that will actually just load the current directories assets and not any nested sub directories and you can see that by oh if we hit reload here we don't get that alert dialog because it's not loading the admin directory now if you want more control over this you could just list out all the files here instead of using require tree or directory you know just say Home Products and so on whatever JavaScript files you want to load for the public an alternative is to use require tree but just set up a separate directory here before the public side so we can call this public and just move any files that we want into here and then use require tree and just say public here and that'll load all the files inside the public now you may be wondering what are some various commands that I can pass into this broca's manifest and I don't know of a good source of documentation for this yet but you may want to check out the source code at self for sprockets instead of the directive processor there are some nice comments in here explaining how it all works in some various commands that you can pass in so check that out I'll link it in the show notes another thing that the asset pipeline handles for us is pre-processing so let's go back to my greeting text file I made earlier and let me show you how this works what you do is you just add an extension for a processor so I can add an e RB extension here and that means I can set in use er be inside of my assets so I can just add one plus one here and it will output correctly and you can see that if I reload the greeting it now includes z2 and notice that in the URL here I'm not using the preprocessor extension I'm just using a dot text at the end so this is basically how the SAS and CoffeeScript work if you use the S CSS extension that's a preprocessor which is just going to run it through SAS processing you could even chain preprocessor so we could add a dot e RB at the end here and that'll run it through a RB first and then go on to SAS now this is all very configurable you can add your own processors swap them out it's all handled using the Tilt's gem so check that out if you want more information on that I'll probably do an episode on it in the future so that's a quick walk through of the features of the asset pipeline but there are some differences in how it works in production so let me walk you through that real quick let me first start up the server in production just like that so now when we visit our application hit reload and then view the source you can see that our files are a little bit different here our application J's file for example now includes this hash at the end of the file name and this is for caching purposes this works much better than a query string at the end of the URL like rails REO does because this is going to actually change the file name itself when the file changes and if we take a look at the file itself we can see that the content is now compressed so that it's going to be a much smaller file now these assets are automatically going to be cached for you and is served by the rack cache middleware so it's pretty fast but if you'd rather have the actual web server itself handle the serving and hosting of the assets what you can do is pre compile them so you can call rake assets precompile and that'll actually pre compile the assets into the public directory so they're easily accessible from the web server whether it be Apache or nginx well that's it for this episode on the asset pipeline a lot of cool features here and like I said earlier I encourage you to check out the rails guide for more information on this and hope you enjoyed this episode see you next week

Channel: Railscasts Reloaded

Views: 10,228

Keywords: Ruby On Rails, Railscasts, Railscasts PRO, HTML, CSS, JavaScript, JQuery

Id: l0E-D53gEL0

Length: 11min 23sec (683 seconds)

Published: Thu Apr 02 2015