이번 포스트에서는 Gulp를 사용하여 자바스크립트 파일에 이미지 파일을 자동으로 복사하는 방법에 대해 알아보겠습니다. Gulp는 자동화된 작업을 수행하기 위한 도구로 많이 사용되며, 파일 복사 또한 Gulp의 주요 기능 중 하나입니다.

1. Gulp 설치 및 초기화

먼저, Gulp를 사용하기 위해 Gulp를 설치하고 프로젝트를 초기화해야 합니다. 아래의 명령어를 사용하여 Gulp를 전역으로 설치합니다.

npm install -g gulp

프로젝트 디렉토리로 이동한 후, 아래의 명령어를 사용하여 Gulp를 프로젝트에 추가합니다.

npm install --save-dev gulp

2. Gulpfile.js 생성

프로젝트 루트 디렉토리에 Gulpfile.js 라는 파일을 생성합니다. 이 파일은 Gulp 작업을 정의하는 역할을 합니다.

3. Gulp 패키지 추가

Gulp는 다양한 플러그인을 제공하며, 이 중 이미지 파일을 복사하기 위해 gulp-copy 패키지를 설치합니다. 아래의 명령어를 사용하여 패키지를 설치합니다.

npm install --save-dev gulp-copy

4. Gulp 작업 정의

이제 Gulp 작업을 정의해봅시다. Gulpfile.js에 아래의 코드를 추가합니다.

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

gulp.task('copyImages', function () {
  return gulp.src('src/images/**/*')
    .pipe(copy('dist/images', { prefix: 2 }));
});

gulp.task('default', gulp.series('copyImages'));

위의 코드에서는 gulp-copy 패키지를 사용하여 src/images 폴더에 있는 모든 이미지 파일을 dist/images 폴더로 복사하고 있습니다.

5. Gulp 실행

이제 Gulp를 실행하여 이미지 파일을 자바스크립트 파일에 자동으로 복사해봅시다. 프로젝트 루트 디렉토리에서 아래의 명령어를 실행합니다.

gulp

위의 명령어를 실행하면 Gulpfile.js에서 정의한 작업이 실행되며, 이미지 파일이 src/images 폴더에서 dist/images 폴더로 복사됩니다.

결론

이제 자바스크립트 파일에 이미지 파일을 자동으로 복사하는 방법에 대해 알아보았습니다. Gulp를 활용하여 작업을 자동화하면 개발 과정에서 효율적으로 파일 관리를 할 수 있습니다. Gulp에 대해 더 알고 싶다면 공식 문서를 참고해보세요.