Lessons: 34Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.12 LiveReload

In this video, I'll show you how to work with the LiveReload plugin for Sublime Text 2. As always, the first thing that we need to do is install the plugin. We can do that through package control. Install, LiveReload. Great, now that's installed, but for this particular plugin, we need one more thing. We need to install the necessary browser extension. If we come back to the live reload repo on GitHub, we can see links to the necessary extensions. In this case, I'm using Google Chrome, so I will click right here. Here we are. As I'm using Chrome, I wanna download this, but one quick note. Let's go ahead and download it. But you can see here also in Chrome version 21 or higher, and I happen to have version 21, we need to manually drag in the extension. Now, we can access all of our extensions by going to Window Extensions. I'll move this to the side and now I'm going to manually drag the extension in like so. We'll click Add. There we go. And now we can see LiveReload version two has been added, and I'm also going to make sure that I enable Allow access to file URLs. Great, so now let's test this out. Here, I don't have anything to work with, so let's use the Fetch plugin, which we covered already. To pull in the latest version of Boilerplate. Now I will switch to index.html and let's open this in the browser. I will move this to the side, and my code editor to the right. And now I'm going to turn on Live Reload. You'll know it's on because you'll see this little compass in the middle. Now let's test it out. I will scroll down, and let's remove this second sentence right here, and if I click Save, you'll see that it instantly updates. Hi there, save, how are you, save. Excellent. Let's see if it works with CSS as well. I will open up main.css, let's remove everything, Save. And we'll set the body background to red, color to green and now we have a beautiful website that I hope you never share with anybody. But this is cool. Now we have live reload functionality with Sublime Text 2 and it only took us about 45 seconds to set up.

Back to the top