gulp-Uglify를 이용하여 typescript 파일 축소하기(minify)

---

목차

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

---

이전 포스트에서 gulp-uglify를 이용하여 javascript를 minify하는걸 알아보았다.
이번에는 typescript를 javascript로 컴파일 후 minify하는 방법을 알아보겠다.

typescript를 minify하기위해서 2가지 방법이 있다.

tsconfig.json파일의 target이 es5 일때와 es6 이상일때 두가지로 나눠서 알아보자

1. target 이 es5일때 minify 하기

필수 패키시 설치하기

컴파일 할때만 사용할 패키지이기 때문에 dev옵션으로 설치한다.

$ yarn add -D gulp gulp-uglify gulp-typescript

gulpfile.babel.js 파일을 작성한다.

import gulp from "gulp";
import GulpUglify from "gulp-uglify";
import ts from "gulp-typescript";
const tsProject = ts.createProject("tsconfig.json");

const routes = {
  typescript: {
    dest: "build"
  }
};

const typescript = () =>
  tsProject
    .src()
    .pipe(tsProject())
    .js.pipe(GulpUglify())
    .pipe(gulp.dest(routes.typescript.dest));

export const dev = gulp.series(typescript);

gulp 실행

package.json파일의 scripts 부분의 gulp실행명령어를 실행한다.

"scripts": {
    "dev": "gulp dev",
}

yarn을 사용하여 gulp명령어가 들어있는 dev를 아래와 같이 실행한다.

$ yarn dev

컴파일된 파일 확인하기

위의 gulp.babel.js 파일에서 dest: "build" 이부분을 보면 컴파일된 소스가 어디로 생성되는지 알 수 있다.
프로젝트의 root 디렉토리에서 build 폴더가 생성된건 확인 할 수 있다.
build 폴더를 확인해보면 예쁘게 minify 된 스크립트 소스를 볼 수 있을것이다.

---

2. target 이 es6일때 minify 하기

필수 패키시 설치하기

위에서 이미 필수 패키지를 설치했기때문에 추가로 필요한 uglify-es 패키지만 설치한다.

$ yarn add -D uglify-es

gulpfile.babel.js 파일을 작성한다.

import gulp from "gulp";
import ts from "gulp-typescript";
import composer from "gulp-uglify/composer"; // uglify 용도
import uglifyes from "uglify-es"; // uglify 용도
const uglify = composer(uglifyes, console); // uglify 용도
const tsProject = ts.createProject("tsconfig.json");

const routes = {
  typescript: {
    dest: "build",
  },
};

const typescript = () =>
  tsProject
    .src()
    .pipe(tsProject())
    .js.pipe(uglify())
    .pipe(gulp.dest(routes.typescript.dest));

export const dev = gulp.series(typescript);

target이 es5일때와 es6일의 gulp-uglify 소스비교

왼쪽이 es5일때이고 오른쪽이 es6일때 gulp-uglify를 사용하는 방법이다.

gulp 실행

package.json파일의 scripts 부분의 gulp실행명령어를 실행한다.

"scripts": {
    "dev": "gulp dev",
}

yarn을 사용하여 gulp명령어가 들어있는 dev를 아래와 같이 실행한다.

$ yarn dev

컴파일된 파일 확인하기

위의 gulp.babel.js 파일에서 dest: "build" 이부분을 보면 컴파일된 소스가 어디로 생성되는지 알 수 있다.
프로젝트의 root 디렉토리에서 build 폴더가 생성된건 확인 할 수 있다.
build 폴더를 확인해보면 예쁘게 minify 된 스크립트 소스를 볼 수 있을것이다.