Gulp는 자바스크립트 빌드 시스템으로서 프로젝트에서 파일 입출력을 관리하는 데 도움을 줍니다. 이를 통해 파일을 병합, 압축, 최적화하고, 변경 사항을 실시간으로 감지하여 자동으로 빌드할 수 있습니다. 이번 튜토리얼에서는 Gulp를 사용하여 자바스크립트 파일의 파일 입출력을 관리하는 방법에 대해 알아보겠습니다.

Gulp 설치

먼저, Gulp를 사용하기 위해서는 Node.js와 Node Package Manager (NPM)이 설치되어 있어야 합니다. 이후 아래의 명령어를 사용하여 Gulp를 전역으로 설치합니다.

npm install -g gulp-cli

Gulp 프로젝트 설정

1. 프로젝트 디렉토리로 이동한 후, package.json 파일을 생성합니다. 이를 위해 아래의 명령어를 실행합니다.

   npm init
   

2. package.json 파일에 Gulp를 의존성으로 추가합니다.

   npm install gulp --save-dev
   

3. 프로젝트 디렉토리에 gulpfile.js 파일을 생성합니다.

4. gulpfile.js 파일에 아래의 코드를 추가합니다.

// Gulp 모듈 불러오기
const gulp = require('gulp');

// 자바스크립트 파일 처리 태스크
gulp.task('js', function () {
  return gulp.src('src/**/*.js') // 소스 파일 경로
    .pipe(/* 처리 로직을 작성합니다. */)
    .pipe(gulp.dest('dist')); // 결과 파일 경로
});

// 파일 변경 감지 및 자동 실행
gulp.task('watch', function () {
  gulp.watch('src/**/*.js', gulp.series('js')); // 소스 파일 경로
});

// 기본 태스크 설정
gulp.task('default', gulp.series('js', 'watch'));

파일 입출력 관리

위의 코드에서 gulp.src('src/**/*.js')는 소스 파일 경로로 설정됩니다. 여기서 src/**/*.js는 src 디렉토리와 모든 하위 디렉토리에서 .js 확장자를 가진 모든 파일을 의미합니다.

또한, .pipe()를 사용하여 파일의 처리 로직을 작성할 수 있습니다. 예를 들어, gulp-uglify 플러그인을 사용하여 자바스크립트 파일을 압축하는 코드는 아래와 같습니다.

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

gulp.task('js', function () {
  return gulp.src('src/**/*.js')
    .pipe(uglify()) // 자바스크립트 파일 압축
    .pipe(gulp.dest('dist'));
});

파일 변경 감지 및 자동 실행

위의 코드에서 gulp.watch()를 사용하여 파일 변경을 감지하고, 변경이 있을 때마다 관련 태스크를 실행할 수 있습니다. 예를 들어, 자바스크립트 파일이 수정되었을 때 gulp.series('js')로 지정된 js 태스크를 실행할 수 있습니다.

gulp.task('watch', function () {
  gulp.watch('src/**/*.js', gulp.series('js'));
});

Gulp 실행

위의 설정이 완료되었다면, 아래의 명령어를 사용하여 Gulp를 실행할 수 있습니다.

gulp

이제 Gulp는 src 디렉토리 아래의 자바스크립트 파일을 감지하고, 파일을 압축한 뒤 dist 디렉토리에 결과 파일을 생성합니다. 파일이 수정되면 Gulp는 자동으로 변경 사항을 감지하여 빌드를 수행합니다.

자세한 Gulp의 사용법과 다양한 플러그인에 대해서는 공식 문서를 참고하시기 바랍니다.

참고: Gulp 공식 문서