[javascript] Gulp를 사용하여 자바스크립트 파일을 압축하는 방법

04 Dec 2023

javascript

Gulp는 웹 개발 작업을 자동화하기 위한 JavaScript 기반의 빌드 도구입니다. 이번 블로그 포스트에서는 Gulp를 사용하여 자바스크립트 파일을 압축하는 방법에 대해 알아보겠습니다.

1. Gulp 설치하기

먼저, Gulp를 사용하기 위해 Node.js가 설치되어 있어야 합니다. Node.js를 설치한 후, 다음 명령어를 사용하여 Gulp를 전역으로 설치합니다.

npm install -g gulp-cli

2. 프로젝트 디렉토리 생성하기

압축할 자바스크립트 파일이 위치할 프로젝트 디렉토리를 생성합니다.

mkdir my-project
cd my-project

3. package.json 파일 생성하기

Gulp를 사용하기 위해 package.json 파일을 생성해야 합니다. 다음 명령어를 사용하여 package.json 파일을 초기화합니다.

npm init -y

4. Gulp 및 필요한 플러그인 설치하기

Gulp와 압축 플러그인인 gulp-uglify를 설치합니다. 다음 명령어를 사용하여 설치합니다.

npm install gulp gulp-uglify --save-dev

5. Gulpfile.js 생성하기

프로젝트 루트 디렉토리에 Gulpfile.js 파일을 생성하고 다음 코드를 작성합니다.

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

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

위 코드는 src 폴더 내의 모든 자바스크립트 파일을 압축하여 dist 폴더로 복사하는 Gulp 작업(compress)을 정의합니다.

6. Gulp 실행하기

아래 명령어를 사용하여 Gulp 작업을 실행합니다.

gulp compress

이제 src 폴더 내의 자바스크립트 파일들이 압축되어 dist 폴더로 복사됩니다.

위 방법을 통해 Gulp를 사용하여 자바스크립트 파일을 압축하는 간단한 작업을 구성할 수 있습니다. Gulp를 활용하여 웹 개발 작업을 자동화하면 생산성을 향상시킬 수 있습니다.