Gulp는 자바스크립트 프로젝트의 빌드 과정을 자동화하는 도구입니다. 이를 사용하면 여러 파일을 병합하거나 최소화하는 등의 작업을 쉽게 할 수 있습니다. 이번 블로그 포스트에서는 Gulp를 사용하여 자바스크립트 파일을 별도의 폴더로 정리하는 방법을 알아보겠습니다.

1. Gulp 설치하기

먼저 Gulp를 설치해야 합니다. 프로젝트 폴더에서 다음 명령어를 실행하여 Gulp를 전역으로 설치합니다.

npm install -g gulp

그리고 프로젝트 폴더에서 다음 명령어를 실행하여 프로젝트에 Gulp를 설치합니다.

npm install gulp --save-dev

2. Gulpfile.js 생성하기

이제 Gulpfile.js라는 파일을 생성합니다. 이 파일에 Gulp의 작업을 정의합니다.

프로젝트 폴더에 Gulpfile.js를 생성하고 다음 내용을 입력하세요.

const gulp = require('gulp');

gulp.task('move-js', function() {
    return gulp.src('src/**/*.js')  // 이동할 자바스크립트 파일의 경로
        .pipe(gulp.dest('dist/js'));  // 이동할 폴더의 경로
});

gulp.task('default', gulp.series('move-js'));

위 코드에서는 move-js라는 Gulp 작업(task)을 정의했습니다. 이 작업은 src 폴더 안의 모든 자바스크립트 파일을 dist/js 폴더로 이동시킵니다.

3. Gulp 실행하기

이제 Gulp를 실행하여 자바스크립트 파일을 정리해보겠습니다. 다음 명령어를 실행하세요.

gulp

Gulp는 Gulpfile.js에 정의된 작업을 실행합니다. 자바스크립트 파일이 dist/js 폴더로 이동될 것입니다.

결론

위의 방법을 따라가면 Gulp를 사용하여 자바스크립트 파일을 별도의 폴더로 정리할 수 있습니다. Gulp를 사용하면 프로젝트의 빌드 과정을 자동화하여 효율적으로 작업을 할 수 있습니다.

더 자세한 정보는 Gulp 공식 문서를 참조하세요.