livereload 사용법

저는 sublime text를 에디터로 주로 사용합니다.
웹 공부중인데 지인이 LiveReload 라는 플러그인이 있다고 하더라고요.

LiveReload 는 서브라임텍스트 에디터에서 작업한 내용을 저장하면 웹 브라우저가 자동으로 갱신되도록 해주는 플러그인입니다. 사용하려면 몇 가지 작업을 해줘야 합니다.

---

1. sublime text 플러그인 package control

Ctrl + Shift + P를 누르시면 이렇게 명령 창이 내려옵니다.

여기서 package control이라고 쳐서 설치하시면 됩니다.

잘 설치되었습니다.

이제부턴 install을 치면 나오는 install package를 통해 플러그인을 설치할 수 있습니다. 클릭하면 몇 초 후에 새로운 명령 창이 나타납니다. 여기에 livereload라고 검색합니다.

누르고

로딩을 기다리면

설치가 끝나고 해당 탭이 뜹니다.
이제 열려 있는 탭을 모두 지우고 에디터를 재시작합니다.

재시작하고 나면 preferences 탭에 livereload가 추가되어 있습니다. settings - default를 클릭합니다.

{
   "enabled_plugins": []
}

들어가면 이런 코드가 있습니다.

{
   "enabled_plugins": [
      "SimpleRefresh"
   ]
}

위와 같이 바꿔줍니다.
이제 livereload 설정은 끝났습니다.

2. 크롬 확장 프로그램 livereload

크롬 웹 스토어라고 google에 쳐서 들어간 뒤 livereload를 검색합니다.

Chrome에 추가 버튼을 눌러서 추가해줍니다.

그러면 브라우저 우측 상단에 이런 확장 프로그램이 생깁니다.

마우스 오른쪽 클릭 -> 확장 프로그램 관리에 들어가서 사용을 눌러줍니다. 이러면 브라우저 쪽 준비도 끝입니다.

3. JS 삽입

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

html 파일 내에 이런 스크립트를 삽입하시거나 외부에서 찹조하시거나 하는 방식으로 하시면 됩니다.

ex)

---

근데 이렇게 했는데 안 되는 경우가 있습니다. 이럴 땐 번거롭지만 preferences -> package settings -> livereload -> plugins -> enable/disable plugins로 들어갑니다.

이 설정을 눌러서 좌측 하단에 has enabled가 나오면 그때부터 잘 작동합니다.
이거 정말 좋습니다. 편하고.. 꼭 사용하세요. 질문 있으시면 댓글로 주세요.