[Gulp] 걸프를 활용하여 프론트엔드 개발 환경 조성하기 #1

 

안녕하세요. 레미입니다🤸‍🤸

이번엔 걸프를 활용한 개발 환경 조성 방법 시리즈를 올리려고합니다.

노마드 코더의 강의를 정리한 내용이에요.

 

 

Info

Gulp ?

Node.js와 npm 기반의 태스크 러너이며, 소형화, 연결(concatenation), 캐시 버스팅(cache busting), 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화하기 위해 사용된다.

 

 

프론트 작업을 몇가지만 꼽아보자면,

 

1. 브라우저 별 css prefixer 붙이기

2. sass 컴파일링

3. 이미지 압축

4. js 트랜스파일링(es6 to es5)

5. css, js 압축(경량화)

6. 웹서버 띄우기

7. 유닛 테스트

 

등등이 있습니다. 걸프를 사용한다면 위 작업들을 자동화 시켜 한번에 처리가 가능합니다.

노마드의 니꼬쌤이 강의를 진행하시며 어메이징 ~ 뷰티풀 ~ 감탄사를 몇 번씩 표현하곤 하셨는데요.

세팅을 마치고 나니 저도 니꼬쌤과 같은 마음이 되었습니다.

걸프는 정말 어메이징 합니다! 😍😍😍 차근차근 진행할테니 따라와주세요.

 

 

01초기 설치 (window 기준)

- gulp를 사용하려면 패키지 매니저 설치가 필수입니다! 걸프, 그리고 그와 관련된 패키지들을 설치하고 관리해야하기 때문입니다. (니꼬쌤 강의에선 npm으로 시작하나, 강의 도중 yarn으로 변경이 됩니다. 둘 중 편한걸 사용하시면 되지만,

저는 강의를 편하게 따라하기 위해 yarn으로 사용했습니다.)

 

---

01Package Manager 설치

- npm 설치 :

npm은 node.js 의 기본 패키지 매니저입니다. node.js를 설치하시면 기본적으로 npm 명령어를 사용 가능합니다.

아래의 사이트에서 LTS버전의 node.js를 내 컴퓨터에 맞는 버전으로 다운 받은 후 설치합니다. (저는 Windows Installer의 64bit를 받았습니다.) 

 

nodejs.org/ko/download/

다운로드 | Node.js

 

설치가 제대로 되었는 지 확인 하는 방법은 명령프롬프트(cmd) 창을 켜서 "node -v"를 입력하시면 버전 정보를 볼 수 있습니다.

아래 이미지를 참고해주세요.

 

 

 

 

 

- yarn 설치 : 

yarn의 설치 방법은 3~4개 정도 있으나 여기선 npm으로 설치하는 방법을 안내해드리겠습니다.

vs code와 같은 에디터의 터미널이나 명령 프롬프트에서 설치하셔도 무방합니다.

저는 걸프 환경을 만들기 위한 폴더를 생성했기 때문에 vs code의 터미널에서 설치를 진행했습니다.

아래 명령어를 입력해주세요. (여기서 -g는 -global로 전역설치를 의미합니다. npm, yarn의 경우 모든 프로젝트에서 두루 사용되기 때문에 전역적으로 설치해줍니다.)

 

npm install -g yarn

 

yarn 설치 확인도 npm과 동일합니다. 터미널창에 "yarn -v"을 입력한 뒤 버전 정보가 나온다면 정상적으로 설치되었습니다.

 

 

---

 

02프로젝트 폴더 생성

- 프로젝트 폴더를 생성합니다. 저도 gulp 환경 전용 테스트 폴더를 아래와 같이 구성하였습니다.

블러 처리된 것들은 추후 설명되어질 파일 또는 폴더입니다. 

큰 가지로 살펴보자면, "GULPTEST" 라는 프로젝트 폴더 아래 src, build 폴더가 존재합니다.

사진에선 src 폴더만 보이는데요. build는 모든 세팅을 마친 후 빌드 자동화를 거쳐서 생성될 것입니다.

아래와 같이 구성해주시면 됩니다.

 

 

 

---

 

03gulp package 설치

- 본격적으로 걸프를 사용하기 위해 패키지를 설치합니다. 패키지를 설치하면 콘솔에서 걸프를 호출할 수 있게 도와줍니다. gulp를 사용하기 위해선 gulp-cli가 꼭 필요합니다. gulp-cli와 gulp 동시에 설치도 아래와 같이 가능합니다.

yarn에선 다중 패키지 설치시 패키지명 사이에 스페이스바로 공백만 입력해주시면 됩니다.  

"--dev" 플래그는 devDependency로만 설치한다는 의미입니다. 이걸 사용한 이유는

gulp는 애플리케이션 개발 과정까지만 필요하기 때문입니다.

 

yarn add --dev gulp-cli gulp

---

yarn으로 gulp-cli, gulp를 정상적으로 설치완료 하시면 "node_modules" 폴더, "package.json", "yarn.lock" 파일이 자동으로 생성됩니다. 사진 우측을 보시면, devDependency 안에 설치된게 보이실거에요.

 

---

 

04yarn init -> package.json 파일 생성하기

- package를 관리해 줄 package.json 파일을 생성합니다. 이 파일은 yarn init을 진행하면 자동으로 생성됩니다.

하지만, 저희는 위 순서에서 gulp를 설치하며 이미 생성이 되었죠? 순서를 바꿔서 init을 먼저 진행하셔도 됩니다.

gulp 설치 후 init을 진행하면 package.json파일에 프로젝트 정보를 입력하는 작업을 하게됩니다. 

터미널 창에 아래와같이 입력해주세요.

 

yarn init

 위 명령어를 입력하면 기본적인 정보를 입력하라는 메세지가 아래와 같이 나옵니다.

question name (gulptest): my project name
question version (1.0.0): my project version
question description: my project description
question entry point (index.js):
question git repository: 
question author: author name 
question license (MIT):
question private:

저희는 테스트용이니 간단하게 프로젝트 이름과 설명만 입력하고, 그 외의 것들은 엔터를 치고 넘어 가셔도됩니다.

 

 

 

여기까지 1차 세팅을 마무리 짓고, 다음 포스팅에서 만나뵙도록 하겠습니다. 😊