Gulp 기본 API - by. UXKM

3.1. gulp.task()

Gulp는 기본적으로 여러 개의 task(작업)로 구성되어 있으며, 각 task는 Gulp가 수행해야 할 하나의 작업 단위를 의미합니다.

예를 들어, 다음과 같은 task들이 있을 수 있습니다.

• src 폴더의 njk 파일을 html 파일로 변환하여 dist 폴더에 출력하는 작업
• src 폴더의 scss 파일을 css 파일로 변환하여 dist 폴더에 저장하는 작업
• src 폴더의 모든 파일 변화를 감지하여, 변경 시 브라우저에 실시간으로 반영하는 작업

이처럼 각각의 task가 모여 gulpfile.babel.js 파일을 구성하게 됩니다.

Gulp는 이러한 task들을 병렬 또는 순차적으로 실행할 수 있으며, gulp.task('taskName', function)의 문법을 가집니다.

3.2. gulp.src()

Gulp가 처리할 파일의 경로를 정의합니다.
두 개 이상의 경로를 지정할 경우, 배열 형태로 전달할 수 있으며, 특정 폴더나 파일을 제외하고 싶을 때는 경로 앞에 ! 기호를 붙여 제외할 수 있습니다.

3.3. gulp.pipe()

gulp.src()를 통해 선택된 파일들에 대해 어떤 작업을 수행할지 정의할 때, 각 작업은 .pipe() 메서드를 통해 파이프라인 방식으로 연결됩니다.
예를 들어, style.scss 파일을 style.min.css 파일로 컴파일하고 압축하는 작업은 다음과 같이 작성할 수 있습니다.

코드를 보면 알 수 있듯이, Gulp는 pipe() 를 통해 각 작업을 순차적으로 연결하며, 마치 물이 흐르듯 파일을 단계별로 처리합니다.

3.4. gulp.dest()

gulp.dest()는 Gulp 작업에서 처리한 파일들을 지정한 출력 경로(디렉토리)로 저장하는 역할을 합니다.
예를 들어, Sass를 컴파일하거나 JavaScript를 압축한 후, 해당 결과물을 원하는 폴더에 저장할 때 사용됩니다.

3.5. gulp.watch()

특정 파일이나 폴더의 변경 사항(수정, 추가, 삭제 등)을 지속적으로 감시하고, 변경이 감지되면 지정된 작업(task)을 자동으로 실행하는 Gulp 함수입니다.
이 기능을 활용하면 파일을 수정할 때마다 매번 수동으로 빌드할 필요 없이, 실시간으로 자동 빌드나 리로드가 가능해져 개발 효율이 크게 향상됩니다.