수평선
897
2018-04-11 11:54:24 작성 2018-04-12 12:07:01 수정됨
9
3104

html,js,css 파일 수정시 브라우저 자동 리로드기능입니다.


html,js,css 파일 수정시 브라우저 자동 리로드기능입니다.

방식1-크롬확장프로그램 livepage. 
https://chrome.google.com/webstore/detail/livepage/pilnojpmdoofaelbinaeodfpjheijkbh?hl=en

방식2-html페이지마다 삽입. <script type="text/javascript" src="http://livejs.com/live.js"></script>

방식3-nodejs의 gulp모듈과 Browsersync 어플리케이션설치
가장 흥미로운 기능은 여러 개의 브라우저를 실행했을 때 한 브라우저에서 클릭을 하면 
다른 브라우저에서도 동일한 위치에 클릭 이벤트를 발생시켜 여러 브라우저에서 동시에 
동일하게 동작할 수 있도록 도와주는 기능입니다.  출처: http://webclub.tistory.com/473 [Web Club]

방식4-nodejs의 gulp모듈과 gulp-watch gulp-livereload 플러그인사용

방식5-nodejs의 grunt모듈과 grunt-contrib-watch grunt-express 플러그인사용 - 
참고  grunt-contrib-watch는 Deprecated됨

방식6-크롬확장프로그램 livereload,guard(루비설치필요) 

방식7-Chromix

다음은 툴에서 지원하는 방식입니다.
방식8-[아톰(Atom)/패키지] atom-live-server (실시간 미리보기) http://recoveryman.tistory.com/302 
방식9-[브라켓(Brackets)] 실시간 미리보기 http://recoveryman.tistory.com/139 
방식10-드림위버사용 https://helpx.adobe.com/kr/dreamweaver/using/previewing-pages.html 
방식11-웹스톰(유료) https://www.youtube.com/watch?v=UHYtQm-8N0k 
방식12-sublime text 사용 http://demun.tistory.com/2345 
방식13-[비주얼 스튜디오 코드(Visual Studio Code)] live server http://recoveryman.tistory.com/383 


참고로 Browsersync 가 기능면에서 가장 강력하고 livepage 가장 심플했습니다.
,live.js 도 나름 좋았습니다.(내부코드보면 로컬일때만 동작하게 되어있네요)
nodejs,tomcat 등을 사용하지 않고 테스트하려면 간단히 다음의 방법을 사용하면 됩니다.
파이썬  python -m SimpleHTTPServer 8080
루비 ruby -run -e httpd . -p 8080
7
4
  • 댓글 9

  • 김룰룰룰
    258
    2018-04-11 12:07:20

    Atom에서 프론트 코드 수정한다면 atom-live-server 설치하는 방법도 있습니다.

    0
  • 수평선
    897
    2018-04-11 12:20:44

    네..감사합니다..

    0
  • 수평선
    897
    2018-04-11 12:21:13

    사실 툴에서 지원하는 경우도 많더라구요..

    1
  • Zeratul
    2018-04-11 12:29:24

    많은 시행착오를 겪으신걸로 보입니다.

    공유해 주셔서 고맙습니다.


    0
  • 수평선
    897
    2018-04-11 12:41:58

    혹시 다른 방법 알고 계시는거 있으면 공유하면 좋을것 같습니다.

    참고로 ionic 어플개발할때도 브라우저 자동 리로드 되더라구요..

    0
  • 수평선
    897
    2018-04-12 12:02:05

    에디터에서 지원하는 방법 추가했습니다.

    0
  • termy
    116
    2018-04-12 15:39:13

    https://www.npmjs.com/package/live-server

    전 이거 사용합니다.

    npm i -g live-server
    1
  • 수평선
    897
    2018-04-12 16:51:28

    live-server 좋네요..감사합니다.

    0
  • TF_JW
    162
    2018-04-15 17:45:26

    와 좋은거 많네요

    개발떄 써보겠습니다. 꾸벅

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.