npm run start 시에 터미널 한개로 한번에 자동 watch하기 (sass 컴파일, webpack 번들링, 서버 실행)
이전 포스팅에서 npm run start시에 한번에 묶어서 실행이 되게 하였는데 watch가 되지 않아 계속 서버를 껏다가 켰었다
그래서 이번에는 nodemon ,concurrently 를 이용하여 한번에 watch 하여 실행되게 하였다
(서버를 껏다킬 필요가 없어졌다) (～￣▽￣)～
방법
npm install -g nodemon
노드몬을 전역에 설치 하고npm install concurrently
concurrently를 설치하였다
- webpack 은 webpack.config.js에 watch: true로 바꾸었고 (자동 반영)
- sass는 package.json에서 --watch 속성을 주었다 (자동 반영)
- 그리고 서버를 실행할 때는 nodemon으로 실행했다 (자동 반영)
- 그리고 start 인
npm run start시에 scss, webpack, 서버 실행을 하게 해놓았는데 concurrently --kill-others-on-fail로 하나라도 실패하면 모두 종료 시키고 한번에 묶어서 실행시켰다- (concurrently는 &&로 하나씩 실행시키는게 아닌 옵션으로 한번에 묶어서 실행이 가능했다)
- 저렇게 하지 않으면 sass watch를 위한 터미널 하나, webpack을 watch하는 터미널 하나, 서버를 실행시키는 터미널 하나, 터미널이 총 세개가 필요했는데
- cuncurrently는 한번에 묶어서 실행이 가능하다 (～￣▽￣)～
추가로 현재 start 라인이 너무 길어서 스크립트로 바꿧다
- 먼저 tools 폴더안에 start.js 파일을 생성했고
- package.json안의 scripts에 있는 명령어를 start.js의 concurrently 커맨드에 적어놨다
옵션으로 killOthers (하나가 실패하면 모두 종료하기) 도 설정해두었다
참고서버종료시에는 GoodBye Beemo World~!!를 찍어보았다 ㅎㅎ
- 현재는 tools/start.js를 실행시키면 된다
- 실행되는 화면
- 5초 뒤 종료하였다 (종료하기 전 상태는 scss, js, html이 수정되면 자동 반영이 된다)
- GoodBye Beemo World~!! 가 출력되는걸 볼 수 있다
(～￣▽￣)～
