Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I install LiveReload on Sublime Text 3?

I'm using Sublime Text 3 and want to use LiveReload. I have a browser plugin for Chrome already installed. Node.js is also installed.

For Sublime Text 3 Live Reload this plugin must be installed: https://github.com/dz0ny/LiveReload-sublimetext2

How can I install it on Windows 7? It just says something about Linux and OSX users.

like image 464
QJan84 Avatar asked Sep 17 '14 08:09

QJan84


People also ask

How do I use sublime LiveReload?

Using the pluginopen any file in your project and right click > open in browser. now in browser Enable LiveReload on that page by clicking the icon on the top right, which looks like a wheel, the livereload sign. and then you can watch your changes as you save them.

Can I use live server in Sublime Text?

đź“‹ Introduction. This package integrates the Live Server Node package, giving the ability to launch a local development server to serve content directly from Sublime Text.

How do I get plugins for sublime?

Go to SublimeText – Preferences – Package Control (MAC) or Preferences – Package Control (PC) Choose “Install Package” from the list of options. Find the name of the package you wish to install and select it.


2 Answers

Platform I used: Linux Mint 17+
I want to thank http://anthozano.fr/livereload-pour-sublime-text-3/. I was able to run live reload on sublime text 3 with the instructions in the website. However, the website is written in French (i believe - Google translate said), so I thought I could write the steps here.

First install sublime text 3 from here http://www.sublimetext.com/3 or follow your own way you prefer (I did it with Linux mint Package manager).

Secondly, install package control from here https://packagecontrol.io/installation#st3 (instruction is clearly given in the website so I did not explain it much).

Third, open package control (Shortcut : Ctrl+Shift+P) and search for Package Control: Add Repository

Now comes a region to enter URL at bottom part of sublime text 3 window. Enter https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json.

Again, open package control and search for Package Control: Install Package and then search for LiveReload in the upcoming window.

Configure LiveReload Package Setting at Preferences > Package Settings > LiveReload > Setting - Default and paste this :

 
       { 
           "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
           ]
       }
    

Now for your browser, install LiveReload plug in as below :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Don't forget to enable the LiveReload plugin in the browser once you have installed it, so you can see the code changes reflected in the browser right away.

Note: Chrome users, for LiveReload to support file:// pages, go to chrome://extensions/, and check off Allow access to file URLs.

Snapshot taken from Safari for Mac OSX: enter image description here

Enjoy, Live Reload with Sublime Text 3.

Thanks to Anthony Lozano for http://anthozano.fr/livereload-pour-sublime-text-3/.

like image 146
Roshan Poudyal Avatar answered Oct 03 '22 03:10

Roshan Poudyal


Instead of live reload, i'd suggest browser sync, does the same thing only better and without the need for annoying browser plugins.

https://www.youtube.com/watch?v=Rv5f_v5gqw4

like image 20
marblewraith Avatar answered Oct 03 '22 04:10

marblewraith