gulp.js란?

꿀꺽 꿀꺽? 이 글을 보고 웃는 사람이라면 적어도 퍼블리셔거나 혹은 gulp에 관심이 있는 사람일 겁니다.
시작은 “사용하면 업무가 편해진다.” 입니다.
반복적인 업무를 하는 사람이라면 분명 업무 중에 불편함을 느끼는 부분을 느끼게 되고 그걸 해소하고 싶은 욕망이 생기기 마련입니다.

gulp는 node.js 기반의 javascript build toolkit으로 퍼블리싱 업무의 불편한 부분을 해소해주는 좋은 해결책입니다.

* 구글에서 gulp 검색 후 한국어로 번역하면 나오는 “꿀꺽 꿀꺽”

1. Nodejs 설치

gulp.js를 사용하려면 node.js와 npm이 필요합니다.
https://nodejs.org/ko/에서 자신에게 맞는 버전을 설치합니다.

* https://nodejs.org/ko/

2. 환경 변수 설정

시스템 속성 -> 고급 -> 환경 변수 -> 사용자 변수 Path에 AppData npm폴더 경로를 추가합니다.

시스템 속성 -> 고급 -> 환경 변수 -> 시스템 변수 Path에 nodejs폴더 경로를 추가합니다.

사용자 변수와 시스템변수는 적용 범위와 우선순위 차이가 있습니다.

• 사용자 변수 : 로그인한 계정 적용, 시스템 변수보다 우선순위가 높음
• 시스템 변수 : 모든 계정 적용, 사용자 변수보다 우선순위가 낮음

3. Nodejs 설치 & 환경 변수 확인

명령 프롬프트에서 임의의 폴더에서 node –v, npm –v 입력 후 버전 정보가 정상적으로 나오면 여기까지 잘 따라서 오신 겁니다.
이제 윈도우상 어디 위치에서도 node와 npm 명령어를 입력해도 사용할 준비가 되었습니다.

4. gulp 설치

* gulp-cli 설치

node와 npm이 사용할 준비가 되면 gulp를 사용할 수 있게 준비해야 합니다.
gulp-cli는 gulp 명령어를 사용하기 위한 Command Line Interface입니다.
명령 프롬프트에서 “npm install gul-cli –global”을 입력하여 전역 설치합니다.

NPM 설치 명령어 구조는 아래와 같습니다.
npm install <모듈 명> –옵션

* gulp 설치

명령 프롬프트에서 gulp.js를 호출할 폴더 이동하여 “npm install gulp –save-dev”를 입력하여 로컬 설치합니다.

–save는 package.json에 설치된 패키지 정보를 기록하는 옵션이고
-dev는 개발용과 배포용을 구분하기 위한 옵션입니다.

* Gulp-cli, gulp 설치 여부 확인

명령 프롬프트에서 “gulp -v”을 입력하여 버전 정보를 확인합니다.

5. Gulp.js 파일생성

설정을 위한 gulp.js 파일을 생성하고
기본적인 default task를 작성하여 gulp를 호출해 봅니다.
이제 gulp를 사용할 준비가 끝났습니다.

이 글에서는 2개 파일을 하나로 합치는 예제를 작성하겠습니다.

* gulp-concat 설치

명령 프롬프트에서 npm install –save-dev gulp-concat 입력하여 설치합니다.
gulp-concat은 단어에서 예측되듯이 복수의 파일을 연결해주는 기능을 합니다.

연결할 2개 파일을 생성합니다.
예제에서는 A.html, B.html을 생성하였습니다.

A.html과 B.html을 연결하여 SUM.html을 생성하는 task를 작성하여 호출합니다.

문법은 https://www.npmjs.com/package/gulp-concat 에서 확인할 수 있으며 예제에 쓰인 내용은 아래와 같이 해석할 수 있습니다.

gulp.src(<연결할 파일 목록>)
.pipe(concat(<생성할 파일명>))
.pipe(gulp.dest(<배포할 경로>));

SUM.html이 파일이 생성되었고 A.html, B.html 파일 내용이 합쳐져 있는 것을 확인하였습니다.
이로써 2개의 파일이 1개로 연결되는 과정을 보았습니다.

* npmjs

퍼블리셔라면 업무중에 한 번쯤 생각해봤을 반복적인 작업을 자동화하면 어떨까 하는 것들은 대부분
npmjs 에서 제공하고 있습니다.

검색 팁을 드리자면 하려는 목적을 영어로 번역하여 gulp와 조합하여 구글에 검색하면 원하는 기능을 쉽게 찾을 수 있습니다.
Ex) gulp html pretty, gulp css beautify

앞서 설명한 일련의 과정 설명은  glup quick start 가이드  에서 확인 가능합니다.
이제 footer 문구 하나 수정하기 위해 모든 파일을 일일이 하나하나  수정하는 구태에서 벗어나 보는 건 어떨까요?

– 가치 UX 그룹 김재성