서브라임 텍스트 플러그인 - LiveReload

livereload 는 서브라임텍스트에서 코드를 수정하면 실시간으로 브라우져에서 수정된것이 반영되는 것입니다.

코드를 수정하고, 새로고침해서 자주 수정되는과정을 본다면 이 플러그인은 상당이 유용합니다.

이 기능은 현재 사파리,크롬, 파이어폭스 등에서 사용할 수 있고, 윈도우, 맥, 리눅스 등에서 사용할 수 있습니다.

LiveReload -> https://github.com/dz0ny/LiveReload-sublimetext2 , http://livereload.com/

1. sublime text 에서 livereload 설치하기

서브라임텍스트에서 Ctrl + Shift + P 를 클릭해서 명령팔렛트를 열어서, Package Control 를 Install 합니다.

 

그후 창이 뜨면 아래처럼 LiveReload 를 선택합니다.

 

그럼 서브라임텍스트에서의 설치는 끝입니다.

2. 브라우져에서 확장기능 설치하기.

 

각 브라우져의 확장기능이기때문에 확장기능 설치사이트에서 검색을 해서 설치해도 됩니다.

더 간단하게 아래주소를 참고하시면 http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions- 아래 그림처럼 각 브라우져의 확장기능 버젼이 있고, 클릭을 하면 해당 설치 사이트로 갑니다.

 

 

저의 경우 크롬을 사용해보겠습니다.

확장기능을 설치한다음 사용함에 체크를 하세요.

 

그럼 브라우져에서의 설정은 끝입니다.

3. 사용하기.

 

서브라임텍스트에서 수정하는 코드가 실시간으로 크롬 브라우져에서 보여지는 과정을 한번 살펴보겠습니다.

html 을 사용하는 경우 자바스크립트를 한줄 추가해야 합니다.

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')</script>  
 
위의 자바스크립트를 </head> 위나 </body> 위에 추가한다음 코드를 작성하기만 하면 됩니다.

코드를 수정하고 저장을 클릭하거나 Ctrl + S 를 누르는 순간 저장이 되면 바로 웹페이지는 그 코드를 실시간으로 반영이 됩니다.

어떻게 변하는지 간단한 동영상을 만들었습니다.

 

 

 

4. 팁.

첫째. LiveReload 가 완벽하지는 않은듯 합니다. 간혹 실시간으로 반영이 안된다면 서브라임텍스트를 껏다가 다시 켜보세요.

 

둘째. 저장을 눌러야만 실시간으로 반영이 됩니다. Ctrl + S 버튼을 자주누른다면 "save_on_focus_lost": true 를 사용하세요.

Setting - user 에 아래처럼 추가해주면 됩니다.

이 기능은 비단 livereload 가 아니더라도 사용하면 일일이 저장버튼을 클릭하지 않아도 포커스가 다른곳으로 가면 자동 저장이 됩니다. 무척 편리한 기능이죠.

 

 

 

 

출처 : http://demun.tistory.com/2345