[javascript] Gulp를 사용하여 자바스크립트 파일에 UglifyJS를 적용하는 방법
Gulp는 자바스크립트 작업을 자동화하기 위해 사용되는 인기있는 빌드 시스템입니다. 이 튜토리얼에서는 Gulp를 사용하여 자바스크립트 파일에 UglifyJS를 적용하는 방법에 대해 알아보겠습니다.
1. Gulp 설치
먼저, Gulp를 설치해야 합니다. 아래의 명령어를 사용하여 전역으로 Gulp를 설치합니다.
npm install -g gulp
2. 프로젝트 초기화
프로젝트 폴더를 생성하고 해당 폴더로 이동한 뒤, 아래의 명령어를 사용하여 프로젝트를 초기화합니다.
npm init -y
3. UglifyJS와 Gulp-uglify 설치
UglifyJS는 자바스크립트 파일을 압축하고 코드를 난독화하는 데 사용되는 도구입니다. Gulp-uglify는 Gulp에서 UglifyJS를 사용하기 위한 플러그인입니다. 아래의 명령어를 사용하여 UglifyJS와 Gulp-uglify를 설치합니다.
npm install --save-dev gulp-uglify
4. Gulpfile.js 설정
프로젝트 폴더 내부에 Gulpfile.js라는 파일을 생성하고 아래의 코드를 추가합니다.
const gulp = require('gulp');
const uglify = require('gulp-uglify');
function minifyJS() {
return gulp.src('src/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
}
exports.default = minifyJS;
위의 코드는 src 폴더 내부의 모든 자바스크립트 파일을 선택하고, UglifyJS를 사용하여 압축하고 난독화한 뒤 dist 폴더에 저장합니다.
5. Gulp 실행
아래의 명령어를 사용하여 Gulp를 실행합니다.
gulp
위 명령어를 실행하면 src 폴더 내부의 자바스크립트 파일이 압축되고 dist 폴더에 저장됩니다.
이제 자바스크립트 파일에 UglifyJS를 적용하는 방법을 익혔습니다. Gulp를 사용하면 자동화된 작업을 통해 개발 프로세스를 효율적으로 관리할 수 있습니다.