gulp-uglify를 이용하여 babel로 컴파일된 javascript 파일 축소하기(minify)

---

목차

1. gulp - babel을 이용하여 개발 환경설정
2. gulp - Javascript를 babel을 이용하여 컴파일하기
3. gulp - Uglify를 이용하여 babel로 컴파일된 javascript 파일 축소하기
4. gulp - Node + TypeScript 컴파일하기
5. gulp - uglify를 이용하여 컴파일된 typescript 파일 축소하기(minify)

---

node 프로젝트를 babel로 컴파일 후 파일 사이즈를 줄이기 위하여 gulp-uglify 를 이용하여 축소 할 수 있다.
이전 node 프로젝트의 연속포스트 이기때문에 앞부분 궁금하면 먼저 보고 오길 추천한다.

필요한 node 모듈을 설치한다

$ yarn add gulp-uglify -D

gulpfile.babel.js 파일을 수정한다

import gulp from 'gulp'
import babel from 'gulp-babel'
import GulpUglify from 'gulp-uglify' // ------> uglify 추가
const routes = {
  js: {
    src: 'src/**/*.js', // 대상 javascript파일
    dest: 'build', // javascript파일이 컴파일되어서 생성되는 폴더
  },
}

const js = () =>
  gulp
    .src(routes.js.src) // 출발지
    .pipe(babel()) // babel을 이용하여 컴파일
    .pipe(GulpUglify()) // ------> uglify 추가
    .pipe(gulp.dest(routes.js.dest)) // 목적지

export const dev = gulp.series(js) // package.json의 scripts에 작성한 "gulp dev" task

gulp 실행

1. gulp를 실행하면 아래와같이 정상적으로 실행된걸 확인 할 수 있다.

$ yarn dev
yarn run v1.21.0
$ gulp dev
[07:14:43] Requiring external module @babel/register
[07:14:44] Using gulpfile D:\workspace\dryadsoft\gulp\gulp_javascript\gulpfile.babel.js
[07:14:44] Starting 'dev'...
[07:14:44] Starting 'js'...
[07:14:45] Finished 'js' after 104 ms
[07:14:45] Finished 'dev' after 110 ms
Done in 1.85s.

실행결과 root디렉토리에 build 폴더가 생성된다.
생성된build 폴더 안의 구조는 src폴더의 구조와 똑같다.
build 폴더 안에 컴파일된 소스를 확인 할 수 있다.

컴파일된 소스 확인하기

build폴더를 확인하면 아래와 같이 소스가 축소 되어 있는 걸 확인 할 수 있다.

// build/index.js

'use strict'
var _utils = require('./components/utils')
;(0, _utils.plus)(4, 5)

// build/components/utils.js

;('use strict')
Object.defineProperty(exports, '__esModule', { value: !0 }),
  (exports.plus = void 0)
var plus = function(e, s) {
  return console.log(e + s)
}
exports.plus = plus

minify된 파일 실행하기

$ node build/index.js

컴파일된 js파일을 실행하면 정상적으로 실행된 결과값을 확인 할 수 있다.