Gulp 기본 API - by. UXKM

요약 설명

Gulp는 API들 통해 파일 처리, 작업 정의, 변경 감지 등을 효율적으로 수행하여 프로젝트의 빌드 프로세스를 자동화할 수 있습니다.

Gulp의 주요 API로는 task(), src(), pipe(), dest(), watch() 가 있습니다.

3.1. gulp.task()

Gulp는 task로 이루어져 있습니다.

  • src 폴더의 njk 파일을 html 파일로 변환하여 dist 폴더에 생성하는 작업을 하는 task
  • src 폴더의 scss 파일을 css 파일로 변환하여 dist 폴더로 생성하는 작업을 하는 task
  • src 폴더의 모든 파일을 감지하여 파일에 변화가 있을 때 브라우저에 즉각 반영해 주는 task

등 각각의 task가 모여 gulpfile.babel.js를 구성합니다.

task는 Gulp가 처리해야 할 하나의 작업을 의미하며, 병렬로 여러 task를 동시에 수행하게 됩니다.
gulp.task([taskName], taskFunction)의 문법을 가집니다.

3.2. gulp.src()

Gulp가 작업할 파일의 경로를 정의합니다.
두 개 이상의 경로 지정 시 배열을 사용하여 정의할 수 있고, 경로 앞에 '!'표를 추가하면 특정 폴더나 파일을 제외할 수 있습니다.

3.3. gulp.pipe()

gulp.src() 통해 선택된 파일들에 대해 어떤 작업이 수행되어야 할지를 정의할 때 각 function 사이에 파이프 역할을 수행합니다.

예를 들어, style.scss 파일을 style.min.css 파일로 컴파일을 한다면, 아래처럼 진행이 됩니다.

소스를 보면 알 수 있듯이, Gulp는 pipe를 이용해 일종의 파일의 흐름을 만들어 물이 흐르듯 단계별로 작업을 진행합니다.

3.4. gulp.dest()

task를 마친 결과물이 저장될 위치 지정합니다. (도착지라는 의미의 destination의 약자.)

3.5. gulp.watch()

전달된 globs에 해당하는 파일들을 주시하고 있다가, 변동이 있을 시 task를 실행합니다.