- Overview
- Transcript
4.12 LiveReload
Ever wanted the browser to refresh immediately when you save a file? Well, with the LiveReload plugin for Sublime Text, this is a cinch!
1.Introduction
1.1Welcome02:05
2.Getting Started
2.1Installation and Base Settings04:54
2.2Services and Opening Sublime From the Terminal02:20
2.3Multiple Cursors and Incremental Search06:54
2.4The Command Palette04:13
2.5Instant File Changing03:19
2.6Symbols04:17
2.7Key Bindings02:33
2.8Installing Plugins Without Package Control02:54
2.9Package Control03:56
3.Snippets
3.1Your First Snippet09:04
3.2Adding Snippets Through Package Control02:32
3.3Easier Testing With Snippets03:04
4.Essential Plugins
4.1Zen Coding07:09
4.2Emmet06:52
4.3Cross-Browser CSS With Prefixr02:17
4.4Fetch Files With Ease 04:22
4.5Lightning Fast Folder and File Creation 02:12
4.6Sidebar Enhancements03:09
4.7Sublime Linter02:01
4.8Sexy Code Snippet Management With Gists07:50
4.9DocBlockr03:49
4.10Pretty Task Management02:42
4.11HTTP Requests Within Sublime02:29
4.12LiveReload02:06
5.Tips, Techniques and Modifications
5.1Regular Expressions in Sublime05:49
5.2Vintage Mode10:46
5.3Quicker Stylesheet References02:30
5.4Joining Lines04:40
5.5Sublime and Markdown with Marked03:10
5.6All About Projects 05:54
5.7Configuring and Mastering Split Windows07:19
5.8Custom Builds09:01
6.Closing
6.1Conclusion00:49
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.
