[javascript] Gulp를 사용하여 자바스크립트 파일에 라이브리로 추가되는 파일을 컨트롤하는 방법

04 Dec 2023

javascript

Gulp는 JavaScript 빌드 시스템으로, 자동화 작업을 처리하는 데 매우 유용합니다. 이번 블로그에서는 Gulp를 사용하여 자바스크립트 파일에 라이브러리로 추가되는 파일을 컨트롤하는 방법에 대해 알아보겠습니다.

Gulp 설치

먼저, Gulp를 사용하기 위해 Node.js와 NPM이 설치되어 있어야 합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 다운로드하고 설치하세요.

설치가 완료되면 터미널에서 다음 명령어를 입력하여 Gulp를 전역으로 설치합니다.

npm install -g gulp-cli

프로젝트 설정

프로젝트 폴더 내에서 터미널을 열고 다음 명령어를 입력하여 새로운 package.json 파일을 생성합니다.
```
npm init
```
명령어를 입력하면 프로젝트에 대한 정보를 입력하는 프롬프트가 나타납니다. 필요한 정보를 입력하여 package.json 파일을 생성하세요.
다음으로, Gulp와 관련된 라이브러리를 설치합니다.
```
npm install --save-dev gulp gulp-concat gulp-uglify
```
위의 명령어를 입력하여 Gulp와 관련된 라이브러리를 설치합니다. 이 중 gulp-concat는 여러 개의 파일을 하나의 파일로 병합하고, gulp-uglify는 JavaScript 파일을 압축하는 데 사용됩니다.

프로젝트 폴더에 gulpfile.js 파일을 생성하고 다음 코드를 추가합니다.

// gulpfile.js

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

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

위의 코드는 src 폴더 내의 모든 JavaScript 파일을 병합한 후 bundle.js로 압축하여 dist 폴더에 저장하는 작업을 정의합니다.

빌드 작업을 실행하기 위해 터미널에서 다음 명령어를 입력합니다.
```
gulp scripts
```
위의 명령어를 실행하면 src 폴더 내의 JavaScript 파일들이 병합되고 압축된 후 dist 폴더에 bundle.js로 저장됩니다.

이제 Gulp를 사용하여 자바스크립트 파일에 라이브러리로 추가되는 파일을 컨트롤할 수 있습니다. 이를 통해 프로젝트를 효율적으로 관리하고 파일 크기를 줄일 수 있습니다.

더 자세한 Gulp 사용법과 기능에 대해서는 Gulp 공식 문서를 참고하세요.