6. Gulp의 핵심 개념 - 3

Gulp API 개요

이번 포스팅에서는 Gulp API의 핵심 개념과 기능에 대해 알아보겠습니다.

Gulp의 핵심 개념

1. Task (작업): Gulp에서 Task란 특정한 작업을 수행하는 하나의 함수를 의미합니다. 예를 들어, JavaScript 파일을 압축하는 작업, 이미지를 최적화하는 작업 등이 각각의 Task로 정의될 수 있습니다.
2. Stream (스트림): Gulp에서는 파일 처리를 위해 스트림을 사용합니다. 스트림은 데이터의 흐름을 나타내며, 파일을 읽거나 쓰는 과정에서 중간 단계에서 데이터를 가공하거나 변환할 수 있게 해줍니다.
3. Plugin (플러그인): Gulp에서는 다양한 작업을 수행하기 위해 플러그인을 사용합니다. 플러그인은 주로 스트림 상에서 동작하며, 파일을 가공하거나 특정 작업을 수행하는 역할을 합니다.

---

Gulp API의 주요 메서드

gulp.task(name, fn): Task를 정의하는 메서드입니다. name은 Task의 이름을, fn은 해당 Task를 수행하는 함수를 나타냅니다.

gulp.task('myTask', () => {
    // Task 수행 내용
});

 

 

gulp.src(globs): 파일이나 디렉토리를 읽어오는 스트림을 생성하는 메서드입니다. globs는 파일 경로를 지정하는데 사용됩니다.

gulp.src('src/*.js')
    .pipe(/* 스트림 연결 */);

 

 

gulp.dest(path): 파일을 저장할 경로를 지정하는 메서드입니다. 이 메서드 이후의 스트림에서는 해당 경로에 파일이 저장됩니다.

gulp.dest('dist');

 

gulp.watch(glob, tasks): 파일의 변경을 감지하고, 변경이 있을 때 지정된 Task를 실행하는 메서드입니다.

gulp.watch('src/*.js', ['myTask']);

 

gulp.series(tasks): 순차적으로 Task를 실행하는 메서드입니다.

gulp.series('task1', 'task2');

 

gulp.parallel(tasks): 병렬로 Task를 실행하는 메서드입니다.

gulp.parallel('task1', 'task2');

 

---

예시: 기본적인 Gulp 파일

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

// JavaScript 파일을 압축하고 병합하는 Task
gulp.task('scripts', () => {
    return gulp.src('src/*.js')
        .pipe(uglify())
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('dist'));
});

// 파일 변경 감지 및 scripts Task 자동 실행
gulp.task('watch', () => {
    gulp.watch('src/*.js', gulp.series('scripts'));
});

// 기본 Task 설정
gulp.task('default', gulp.series('scripts', 'watch'));

이 예시에서는 JavaScript 파일을 압축하고 병합하는 scripts Task를 정의하고, 파일 변경을 감지하여 자동으로 scripts Task를 실행하는 watch Task를 추가로 정의했습니다. 마지막으로, default Task를 설정하여 기본적으로 실행되는 Task들을 지정했습니다.

결론

Gulp API는 간결하면서도 강력한 기능을 제공합니다. Task, 스트림, 플러그인 등의 개념을 잘 이해하고 활용하면 프로젝트의 빌드 및 자동화 작업을 효과적으로 구성할 수 있습니다. 이를 통해 개발 생산성을 향상시키고 반복적이고 지루한 작업을 자동화할 수 있습니다.