1.2 Quick and Easy Setup

Hey, this is Kez Bracy for Tuts+. Welcome to Top Speed HTML Development With Jade. In this video, you're gonna learn how to get set up to work with Jade in the quickest and easiest way possible. There are all different kinds of ways that you can work with Jade, but we're only gonna look at ways it'll take you, a couple of minutes and virtually no learning curve. So the first thing we're gonna look at is how to use CodePen, and that is the quickest and easiest way to get set up to start working with Jade. Then we will look at how you can get Sublime Text set up to be the perfect editing environment for Jade code, and finally, we will look at Prepos App to compile all of your Jade files into HTML automatically, without you needing to mess around with complication config files or with any command line processes. Okay, first up, we're gonna cover how you can use CodePen to compile your raw Jade code into HTML. Now, this is really, really easy. You could probably just follow your nose, but nonetheless, let's go through it really quickly. Now you're going to go to codepen.io. And the first thing you want to do is click this New Pen button right here. Now, this window on the left, this is where you'll be writing your Jade code. Now before you start writing your Jade code, just hit this little gear icon, and you see, you have options here for how you wanna write in your raw code. And you're gonna choose the Jade option. And now, you can hit the gear button again to close it off, and you'll see you have a little status that is showing you that it is now working with Jade code. From here you can just start writing your Jade code directly into this window on the left. So I have some pre-prepared code that I will just paste in here to show you that it's working. And now down the bottom of the screen, you can see it's compiled the code that I just pasted in into HTML, which it is then displaying in this bottom window. And what you can also do is hit this little eyeball icon here, and that will give you a preview of the code that has been compiled from whatever you have typed into this first window. So we'll hit that, and there you can see the HTML that's been compiled from the raw Jade code, and so that's all you have to do. That's really the quickest and the easiest way to start with Jade. So, if you're just finding your feet with this language and you just want a really quick and easy way to get started, hit up codepen.io. Next stop, for projects that call for a full desktop IDE, we're going to get you set up to work with Sublime Text. My preference is Sublime Text 3, it's a brilliant code editor, so if you don't have that yet, head to sublimetext.com, hit the download button, and go for Sublime Text 3. And the next thing you're gonna want is the Sublime Text Package Manager. Now, that lets you add extensions and additional functionality to your Sublime Text Editor, and you just follow the instructions on this page. I won't show you through that process right now, because all the instructions are here, and they do change a little bit over time, and once you have installed Sublime Text and you've installed Sublime Text Package Manager, then we are gonna install the Jade package. Now, that will give you syntax highlighting that will help to make your code much more readable. So go ahead and, if you haven't already, install Sublime Text 3, and then install Sublime Text Package Manager. So hit the pause button, do those things, and then come back. All right so here we are in Sublime Text 3 and what you're looking at is the same basic Jade code that we pasted into CodePen a moment ago. And by default this is what you're gonna see when you open up Jade code in Sublime Text. It's just all gonna be white and it's gonna be pretty hard to follow without any good syntax highlighting it, and this is why we will be installing a Jade syntax highlighting package. Now, installing it is pretty easy. All you have to do is head up to Sublime Text, go to Preferences, choose Package Control, Hit Install Package, let it think for a little while, and then just start typing out Jade. Now, the first package that comes up is going to be the syntax highlighting package that you want, so click that and it will automatically install for you. Now, that has been successfully installed which means the Jade package will now be available for you. But, you will probably have to restart Sublime Text, so go ahead and do that now. All right, so Sublime Text has been restarted. And you should now be able to head up to View, choose Syntax, and just find Jade in this list. And there you go, that's much better. That's a lot easier to read, so you'll find your whole coding process will go a lot smoother when you have a good syntax highlighting package installed. That's all you need to do for Sublime Text. Next up we will look at how to use Prepros to compile your projects. Prepros is a free app that I personally use for just about all of my projects, and you can use it to automatically compile Jade files whenever you save changes to them. So head over to alphapixels.com/prepros and just grab the free version for your operating system. When you've done that, run the program, and then come back to this video. When you first run Prepros, this is what you're gonna see. Just an empty interface prompting you to drag and drop a folder to start a new project. So that is what we're gonna do right now. So go ahead and create a new folder and in this case we're just gonna call it Example Project. Now, inside that folder, you're gonna make a folder to contain your Jade files. Now, for the purposes of working with Prepros, always make sure that you name this folder Jade. If you name this folder Jade, it will be recognized as something to look for Jade source files within. And then going into that folder again, you're now going to create your first Jade file. Now, I use an extension for Finder called XtraFinder, which allows me to set up a bunch of blank document files. And that also gives me the ability to just go right-click, New File, and create Jade. So call your new file index.jade. And then open that up, in Sublime Text. Now what we're gonna do, is copy the code that we were working with before straight into this file. Now, I'm not gonna save it just yet, because it's the saving that prompts the automatic compilation of Jade. So before we actually save that file, we're going to add the project to Prepros so it will pick up the changes, and automatically compile them into HTML for us. So, we head back up to our top level, Example Project, and we're going to drag that into the Prepros interface. And you'll see it has automatically picked up that there's a Jade file in here that it can process. Now, if you click on that for details, you'll see that it is already prepared to automatically compile this file. You also have the option to choose either Prettify Output or not. So if you uncheck this box, you'll automatically get minified HTML. But for the purposes of these tutorials we'll leave that checked so it's just a little bit easier to read those files. All right, now heading back to Sublime Text. Now, if we save this file, you can see that Prepros has given us a message to let us know that that file has been compiled successfully. And if we go back and have a look at our folder structure, now you'll see Prepros has created an html folder in the same level as our jade folder, and inside that you'll see we have our fully compiled HTML file. Now, if we have a look at that in SublimeText There you can see our fully operational HTML. So you can see from all that, that getting set up to work with Jade is actually eally, really easy. You don't have to take a complicated path at all between your options of using CodePen and using Prepros. Either way, you can do any type of project that you need to do and you can get set up in just a couple of minutes. In the next lesson, you're gonna start learning how to use Jade as a shorthand for creating HTML. So in the same way that you might use stylus or Sass or Less to create CSS, you can also use Jade to create HTML in a much faster and more efficient way. I'll see you in the next lesson.