Gulp는 무엇이고 왜 사용하는지 알아보기

웹서버 운영, 설치에 사용되는 빌드툴 걸프(Gulp)는 무엇이고 왜 사용하는지 알아보려고 합니다.

# Gulp란?

자바스크립트에서 반복적이고 자주 사용되는 일은 자동화해주는 매우 유용한 툴로 빌드시스템이라고 불리기도 합니다. 이를 사용하면 시간을 줄일 수 있고 생산성 향상에 큰 도움이 되므로 프로젝트 진행시 많이 사용됩니다. Grunt또는 Webpack 비교되는 툴로 매우 자주 사용됩니다.

#  Gulp의 하는 일은?

간단하게 요약하면 아래의 일을 수행합니다.

• - 자바스크립트 라이브러리, 서드파티 앱등을 모으고 축소, 압축을 수행
• - 단위 테스트(Unit Test) 수행
• - LESS / CSS 컴파일링
• - 브라우저 Refresh를 도와줌

위와 같은 일을 자동으로 수행하여 줍니다.

# npm을 사용한 gulp 설치 및 실행하기

먼저 package.json이 존재하는지 확인합니다. 없다면 이 역시 생성 및 설정하여야 합니다.

이제 package.json이 설정되었습니다. 다음으로 install 명령어를 사용하여 gulp를 설치합니다.

--save-dev를 주는 이유는 개발과정에만 필요하므로 devDependency, 디펜던시로 모듈을 설치하기 위함입니다. 이제 gulp가 설치 완료되었습니다. 루트 경로를 보면 gulpfile.js 파일이 존재하는데 실행할 Task들을 이곳에 입력하여 실행토록 합니다.

Gulp를 사용하려면 gulp에 설치된 plugin(플러그인)들이 필요합니다.

gulp-webserver  //  웹서버를 구동함
gulp-sass  //  SASS의 컴파일링
gulp-livereload  //  리로드 기능을 수행

등등 ...


이제 Gulp에게 일을 주어야합니다. 아래의 4가지 API를 사용하여 동작시키며 이때 Gulp task 파일(gulpfile.js)을 사용합니다.

Gulp APIs

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch

gulp.task는 반복적으로 수행되야 할 Task들을 모두 작성하여 동작시킵니다.
gulp.src는 어떤 파일을 읽을 것인지 결정합니다.
gulp.dest 어디에 저장할 것인지 경로를 결정합니다.
gulp.watch는 파일의 변경, 업데이트 등을 감지하여 특별한 동작을 수행할 수 있습니다.