gulp - babel을 이용하여 개발 환경설정

목차

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

gulp 란 무엇인가?

gulp는 흔히 Task Runner로 알려져있다.
많은 일을 Task로 만들고 그 Task를 실행하여
결과물을 자동으로 생성한다.

Task 란?

1. 자동 이미지압축
2. 최신자바스크립트를 구형브라우저에서 이해 할 수 있도록 컴파일하는 등
   여러가지 작업이 가능하다.

위 1번, 2번과 같은 일을 Task로 만들어서 사용한다.

gulp 개발환경 설정

1. gulp-cli 전역 설치

$  yarn global add gulp-cli

또는 npm을 사용할때는 아래 명령어로

$  npm install gulp-cli -g

2. dev옵션으로 gulp설치

$ yarn add gulp -D

또는 npm을 사용할때는 아래 명령어로

$ npm istall gulp-cli -dev

패키지안에서 scripts 명령어로 사용하기 위하여 dev 옵션으로도 설치한다.

3. 작업폴더 생성

$ mkdir src   -> 컴파일 대상이되는 파일 및 폴더를 넣는다.
$ mkdir src/components   -> src 내부폴더 생성

4. gulpfile.js 파일 생성

• 프로젝트 root 디렉토리에 gulpfile.js 파일을 생성한다.

5. gulp파일 babel 컴파일 적용

최신 자바스크립트를 사용하기 위하여 gulp 파일에 babel 컴파일을 적용한다.

• gulpfile.js 파일 명칭 변경
  gulpfile.js 파일의 명칭을 gulpfile.babel.js 로 변경한다.

• 프로젝트의 root디렉토리에 .babelrc 파일을 생성 후 아래와 같이 작성한다.

  {
  "presets": ["@babel/preset-env"]
  }

6. @babel 모듈 설치

@babel 모듈은 모두 devDependencies로 설치한다.

$ yarn add @babel/register @babel/core @babel/preset-env -D

7. gulp 실행 확인

1. package.json 파일에 scripts를 작성한다.

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

2. srcipts 에서 작성한 dev를 실행한다.

$ yarn dev

실행결과는 아래와같이 오류가 발생한다.
아직 gulpfile.babel.js파일에 dev 라는 task를 만들지 않았기 때문에 아래와 같은 오류가 발생하는게 정상이다.

$ yarn dev
yarn run v1.21.0
$ gulp dev
[07:11:27] Requiring external module @babel/register
[07:11:29] Using gulpfile D:\workspace\typescript\gulptypescript\gulpfile.babel.js
[07:11:29] Task never defined: dev
[07:11:29] To list available tasks, try running: gulp --tasks
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

gulp를 최신자바스크립트를 사용하기위한 모든 설정이 끝났다.

다음포트스에서 gulpfile.babel.js 파일에 task 를 만들어 컴파일하는 방법을 작성하도록 하겠다.