Thursday, May 26, 2016

Setting up Livereload for Sublime Text 2



Hello Everyone, today I’m gonna tell you how to setup livereload for Sublime Text 2. This would be the most sy method to setup livereload. So lets get started…


Setting up Package Control in Sublime Text 2
If you alrdy have Package Control then you can skip this step.

Package Control is the most sy 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 )Copy the following in the console and press enter
Source
1
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')).rd()); print('Plse 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.Srch 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 2Then 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.

Thats it now get rid of refreshing your page ch and every time you save the file. LiveReload will automatically refresh your page as soon as you save your file in Sublime Text 2.

Tutorial ByNaveed Aslam

No comments:

Post a Comment