gulp - javascript를 babel을 이용하여 컴파일하기

---

목차

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

---

javascript 컴파일 하기

node.js프로젝트의 js파일 한가지만 간단하게 컴파일하는 방법을 알아보자.
gulp개발환경 세팅이 아직 안되어 있으면 이전포스트를 참고하길 바란다.

src 폴더에 javascript 파일을 생성 후 테스트 코드를 작성

src / components / utils.js;

const plus = (a, b) => console.log(a + b)

export { plus }

// src / index.js;

import { plus } from './components/utils'

plus(4, 5)

javascript를 컴파일하기 위하여 필요한 모듈을 설치한다.

$ yarn add gulp-babel -D

gulpfile.babel.js 파일에 아래 내용을 작성한다.

import gulp from 'gulp'
import babel from 'gulp-babel'

const routes = {
  js: {
    src: 'src/**/*.js', // 대상 javascript파일
    dest: 'build', // javascript파일이 컴파일되어서 생성되는 폴더
  },
}

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

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

gulp 실행

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

$ yarn dev
yarn run v1.21.0
$ gulp dev
[07:38:00] Requiring external module @babel/register
[07:38:01] Using gulpfile D:\workspace\dryadsoft\gulp\gulp_javascript\gulpfile.babel.js
[07:38:01] Starting 'dev'...
[07:38:01] Starting 'js'...
[07:38:01] Finished 'js' after 67 ms
[07:38:01] Finished 'dev' after 75 ms
Done in 1.69s.

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

컴파일된 자바스크립트 실행하기

$ node build/index.js

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