Gulp는 자바스크립트 개발 작업을 자동화하기 위한 도구이며, 프로젝트에서 사용되는 자바스크립트 파일의 크기를 최소화하는 과정을 쉽게 수행할 수 있도록 도와줍니다. 이 글에서는 Gulp를 사용하여 자바스크립트 파일의 크기를 최소화하는 방법에 대해 알아보겠습니다.

1. Gulp 설치하기

먼저, Gulp를 사용하기 위해 Node.js와 npm이 설치되어 있어야 합니다. Node.js를 설치한 후에는 다음 명령어를 사용하여 Gulp를 전역으로 설치할 수 있습니다.

npm install -g gulp

Gulp를 전역으로 설치한 후에는 프로젝트 디렉토리에서도 다음 명령어를 사용하여 Gulp를 설치해야 합니다.

npm install --save-dev gulp

2. Gulpfile.js 작성하기

프로젝트 루트 디렉토리에 gulpfile.js라는 이름의 파일을 생성하고, 다음과 같은 내용을 작성해주세요.

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

gulp.task('minify-js', function() {
  return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

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

위의 코드는 src 폴더에 있는 모든 자바스크립트 파일을 최소화(minify)하여 dist 폴더에 저장하는 Gulp 작업을 정의합니다. gulp-uglify 패키지를 사용하여 자바스크립트 파일을 압축하는 과정을 수행합니다.

3. Gulp 실행하기

이제 다음 명령어를 사용하여 Gulp를 실행할 수 있습니다.

gulp

위의 명령어를 실행하면 지정된 작업(minify-js)이 수행되어 자바스크립트 파일이 최소화되고, dist 폴더에 결과물이 생성됩니다.

참고 자료

• Gulp 공식 사이트
• gulp-uglify 패키지