테스트 사이트 - 개발 중인 베타 버전입니다

웹 개발하면서 실시간 브라우져 자동 리로드

· 10년 전 · 2299 · 6
JBoss 에서 나오는 개발툴에도 있던데
다른 IDE 에는 없더군요...
 
프로젝트 소스의 변경없이, 원도우에서 되는게 없을까 몇일 동안 헤매다가 
ionic 에서 테스트해보고 공유합니다.
 
좀더 좋은 방법이 있다면 공유 부탁 드립니다.
 
[ 요구환경 ]
 
- 브라우져 : 크롬
- 개발툴 : 어떤것이든 무관
- 스크립트 : Ionic  <--- 다른것도 관계없습니다...제가 테스트하며 사용한것...
 
[ 순서 ]
 
1) 크롬에 플러그인 설치
    LiveReload : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
 
2) 데몬으로 돌아갈 프로그램 설치 ( 감지용 )
 
   2-1) http://livereload.com/ 사이트 방문
 
   2-2) 중간쯤보면 맥용 / 원도우용 / 리눅스용 있습니다..원하시는것을 선택하셔서 설치
 
   2-3) 다운 받으셔서 설치하면 창이 하나 뜹니다.
         - 왼쪽 add 버튼 클릭 하셔서 개발하시는 프로젝트의 최상위 선택
         - 오른쪽 action + files 을 마우스로 선택하시면
            sass, less, coffee 부터 원하시는것들을 같이 여러개 지원  
   
3) 크롬에서 
   3-1) 위의 크롬 플러그인 사용 부분 활성화 확인
   3-2) http://localhost:3000 으로 접속
 
 
[ 테스트 방법 ]
 
개발하시는 프로젝트의 소스을 변경해보세요..
실시간으로 크롬 화면이 적용된것으로 보실수 있습니다
 
 
[ 아쉬운점 ]
 
livereload.com 에서 배포하는 포트가 3000 으로 고정
그래도 이게 어딘가 싶습니다..너무 고마움....
  
 
[ 앱이나 개발 서버에 셋팅하신 경우 ]

만 소스 공통 부분에 삽입하면 끝


(*) 다마리님, 테러보이님.....
     하이브리드 공부하는데, 똑바로 갈수 있게, 이끌어 주시는 점 항상 감사합니다....^--^

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

[ 참고사항 ]

크롬의 플러그인은 1 sec 마다
http://(원하는ip주소):35729/livereload.js <-- 이곳을 접속하고 있더군요.....js 의 interval 과 같은 형태
크롬쪽이라 무시해도 될것 같습니다.

[ 에러 내용 ]
WebSocket connection to 'ws://localhost:35729/livereload' failed:
Error in connection establishment: net::ERR_CONNECTION_REFUSED
Brackets이라는 에디터를 사용하시면 훨씬 편리하게 개발하실 수 있습니다.
Adobe에서 지원하는 것으로 알고 있고요. 완성도 높은 툴입니다.
프론트엔드 쪽 작업을 하실 때 유용하게 사용하실 수 있을거에요.

사이트 : http://brackets.io
감사합니다....인스톨해 봤는데요

크롬에서만 되고 ( 이건 저의 본문과 같은 ), CSS, HTML, JS 파일에 변경 사항만 자동으로 다시 로드된다고 뜨더라구요....
( 저의 본문에 팁 보시면 해당 파일 저장시 전부 다 되고, 앱과 데스크탑 전부 동시에 가능하고..... )

말씀하신툴은 Sublime 과 비슷한 느낌인대, 확장 기능이 좀 많이 부족한......
확장 기능 확인 이곳에서 했습니다 ( https://brackets-registry.aboutweb.com/ )

Adodb 에서 오픈 소스로 밀어 주나봐요....^-^
답변 감사합니다. 인스톨해서 후기도 남겨주셨네요^^
저는 디자인 & 웹프론트앤드 쪽을 전문적으로 하고 있지 않아서 brackets을 많이 사용해본 것은 아니지만,
"실시간 미리보기" 창을 띄어두면 파일을 편집하면서 변경사항을 바로 볼 수 있다는 것으로 만족스럽더라구요.
저도 도움이 되었는걸요...^^

말씀하신것처럼 brackets 에도 HTML, CSS, JS 을 자동으로 인식, 브라우져 Reload 부분이 있더라구요.
그런데, 본글처럼 이미지부터 SASS 까지 다 되는게 있어서, 공유차원에서 올렸었어요...

저는 주력이 Front 보다는 백단 개발자였는데,
하다보니 잡부 인생으로 살아가는중입니다...ㅋ

좋은 정보 있으면 공유 부탁 드릴께요...^-^
phpstorm에 liveedit이라는 플러그인 있습니다. 근데 잘 사용해야지 쿼리문 잘못해서 디비가 끝장날 수도 있으니, 조심해서 사용해야... ^^;

게시글 목록

번호 제목
32341
32339
32326
32325
32322
32319
32318
32316
32315
32313
32312
32311
32310
32304
32303
32300
32293
32292
32291
32285
32284
32275
32271
32268
32265
32261
32258
32257
32255
32254
32253
32251
32250
32249
32247
32246
32245
32244
32243
32242
32241
32240
32239
32238
32237
32236
32232
32229
32228
32227
32217
32215
32214
32213
32211
32207
32196
32193
32192
32190
32188
32186
32184
32173
32172
32171
32167
32165
32163
32162
32158
32157
32155
32151
32149
32135
32132
32127
32125
32122
32120
32119
32117
32116
32115
32114
32112
32111
32109
32107
32104
32103
32102
32101
32094
32089
20404
31036
8279
8268