Atom/Gulp로 편리하게 개발하기(mac용 - 2)
써보면.. 압니다.
이전글에서 아톰 설치에 이어 이제는 본격적으로 Gulp 를 설치하여 실행해 보도록 하겠다. 이 부분은 Gulp의 webserver를 설치하는데 목적이 있기 때문에 그냥 내용을 타이핑 하고 필요한 부분이 있을경우 추가 설치하여 가져다 쓰는것을 권한다.
1. npm init 를 타이핑하면 package.json 이 추가된다.
내용을 다 수정할것이기 때문에 몇가지 질문을 엔터치고 마지막엔 yes를 타이핑하면 파일이 만들어 진다. 그리고좌측 폴더 있는 부분에 마우스 우클릭을 하여 app이라는 폴더를 만들어 둔다. (app 이라는 폴더에 html/css/JS가 들어갈 것이기 때문이다.) package.json 이 만들면 아래 그림과 같이 내용을 변경해 둔다.
위의 그림과 같이 폴더를 만들고 package.json 을 변경해 놓도록 하자.
여기까지 하고 다시 좌측에 폴더 있는데로 가서 전체 폴더에 마우스 우클릭을 하고 new file를 선택한 후 위의 그림과 같이 gulpfile.js파일을 만들도록 하자 그리고 아래 그림과 같이 내용을 추가한다.
위의 그림과 같이 만들었으면 아래 터미널에서 Gulp를 전역으로 설치하자. npm install gulp -g 를 타이핑 하여 설치하면 된다. 그리고 npm install 을 타이핑 하여 npm을 인스톨 한 후 app 폴더안에 테스트 할 index.html 파일을 만들어 저장한 후 터미널에 gulp 를 타이핑 해보자.
위의 그림과 같이 나오면 잘 된것이라고 할 수 있다. 이후 브라우저에 http://localhost:8000/ 을 타이핑하여 해당 hi 가 보이는지 확인해보자.
브라우저에서 이렇게 나오면 html 을 수정하고 저장하는 즉시 localhost에 반영하게 된다. (물론 약간 느릴 수 있지만 생각보다 빨리 나올것이다. ) 이렇게 해서 하나하나 수정하고 실행할 필요 없이 저장하고 바로 확인하는 시스템을 갖추게 되었다. Gulp는 이외에 많은 기능을 가지고 있지만, 현재 개발공부를 하면서 가장 유용한 기능을 우선적으로 설명하였다. 참고로 아래 파일들을 첨부 해 놓았으니 오타가 걱정되시는 분들은 아래의 파일을 다운로드 받고 nodejs와 gulp를 설치하는 방법으로 진행해도 된다.
