Hello Everyone, today I’m going to tell you how to setup livereload for Sublime Text 2. This would be the easiest method to setup livereload. So let’s get started…

Setting up Package Control in Sublime Text 2

If you already have Package Control then you can skip this step.
Package Control is the easiest method to install Sublime Text 2 plugins. So to install it follow the instructions.
  • Open Sublime Text 2.
  • Go to View > Show Console or you can press Ctrl + ` (In Windows)
  • Copy the following code in the console and press enter
    import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

    Or get help from wbond.net
  • Now restart sublime text 2
Thats it you have successfully installed Package Control.

Installing Livereload

Now let us install livereload plugin for Sublime Text 2.
  • Go to Tools > Command Palette or press Ctrl + Shift + P. This will open Command Palette.
  • Type Package Control. You will see a list of options. Click on Package Control: Install Package. Wait for some time. This will open a package list.
  • Type Livereload and click on the option. Wait for some time and your plugin will be installed.
  • Now Restart Sublime.
Now let us install the browser extension.
  • Go to this page.
  • Install the plugin for your browser.
  • Chrome: Go to Settings > Tools > Extensions.
  • Search for Livereload and tick or enable Allow access to file URLs.
Now you have successfully installed the browser extension too.

Testing Livereload

  • Open any website in Sublime Text 2
  • Then open it in browser (in which you have installed the plugin). To do that right click on the HTML file and click on Open in browser.
  • Finally, enable the browser extension by click on the live reload icon in the toolbar.
    Note: As soon as you click on the livereload icon you should see something like LiveReload client connected in the Sublime Text status bar.
That’s it now get rid of refreshing your page each and every time you save the file. LiveReload will automatically refresh your page as soon as you save your file in Sublime Text 2.
“Time is the most valuable thing a man can spend.“
– Laertius Diogenes