어제 Gulp(걸프)란 걸 접하고 구글링을 통해서 습득해보는 도중 적어놔야겠다 생각 들어서 정리를 해보려고 한다. (왼쪽은 Gulp 로고라고 하니 알아두자)
Gulp는 처음 접하였고 Grunt도 들어는 보았지만 아직 해보진 않았다.
결론은 셋팅해두면 실무에 작업 하는데 도움이 되는 좋은 '자동 빌드 도구'이다.
본인은 이미 비슷한 도구로 GUI형식의 Prepros를 써왔다. 무료다. 다만 유료로 사용하라고 자꾸 뜨는게 귀찮지만 나름 scss도 컴파일 해주고, 서버 역할도 하고, 실시간 미리보기 기능도 있고, scss나 html이 변경되면 바로 브라우저로 반영되서 확인할 수 있고, 로그로 js나 scss 오류도 알려주고, js나 css 같은경우 minify 압축 작업도 해준다. 이미지도 압축한다. 이러한 좋은 툴이 있는데도 불구하고 Gulp를 쓰는 이유는 무엇일까 많이 고민도 하고 찾아보고 있는 중이다. 속도인가? 아니면 취향인가? 어찌되었건 이유가 있기 때문에 쓰는 것 같으니 일단 경험해보자.
이제부터 필요한 내용만 쓰기 때문에 자세한 설명은 빠져 있을 수도 있다.
기본적으로 node.js가 설치되어 있는 PC라고 생각하겠음. (node.js 설치법 및 설정은 따로 검색해서 따라 진행하는 것을 추천함.)
- PC에 프로젝트 폴더 생성 (예, D:\gulpstudy)
- cmd.exe 실행해서 해당 디렉토리로 이동
- npm init 입력한다. 그러면 아래 그림처럼 뜬다.
프로젝트 이름, 버전, 설명, 이러한 것들을 쓰면 프로젝트 폴더에 입력한 내용을 토대로 package.json 이 만들어진다. - npm install -g gulp 입력하여 설치 실행 (아래 그림 맨 윗줄 참조)
- 막 뭐가 설치되면서 우르르르 지나갈꺼임(윗 그림처럼)
- npm install --save-dev gulp 입력해서 해당 프로젝트에 gulp 설치
완료되면 프로젝트 폴더에 아래처럼 셋팅됨
- 자기 스타일에 맞게 작업 폴더를 일단 구성하자.
본인은 작업중인 개발 코드들은 dev라는 폴더에 넣을 것이고, 제작 완료되는 파일들은 public_html 폴더에 넣을 예정이다.
그안에 구조는 아래처럼 폴더화 했다. (지극히 개인적인 것임)
- 다시 프로젝트 폴더에 gulpfile.js 를 만들어야 한다. 이 안에 작업 순서들과 무엇을 자동화 할지 넣는 거였더라.
일단 빈페이지로 파일을 만들어 놓고 에디터에 열어놓자.
드디어 걸프 준비 끝이다.
어려운 것 없었다.
그래도 너무 머리쓰면 안되는 거다.
오늘은 여기까지 하고 쉬자.