[ECMAScript6] 빌드 도구: 걸프와 바벨

개발 과정에서 반복 작업을 자동화 해주는 빌드 도구를 소개합니다.

 

그런트(Grunt), 걸프(Gulp)라는 것을 알아 보겠습니다.

 

일단 걸프를 실행하기 위해서는 node가 설치 되어 있어야 하는 상황이다.

 

https://nodejs.org/ko/

Node.js

 

 

node.js 가 설치 되어 있지 않는다면, 여기 홈페이지에서 설치를 한다.

 

설치 후 확인 방법은 터미널에 밑에 명령어를 작성해주세요.

 

node -v

npm -v

 

 

 

저는 예전에 설치를 한 상태여서 옛날 버전이지만 진행해 보겠습니다.

 

먼저, package.json이라는 파일을 만들어 의존성을 정리해보겠습니다.

 

git init

 

 

밑에 여러가지 묻는게 나오는데 저희는 연습이니깐 전부 엔터로 기본값으로 만들겠습니다.

 

그런 다음 gulp를 사용하기 위해, gulp를 설치해 줍니다.

 

npm install -g gulp

 

원래는 npm install gulp 만 사용하면 되지만 -g 라는 옵션을 추가하여 전역에 추가하여 준다.

 

 

걸프를 사용할 우리 프로젝트에 명령어를 넣어준다.

 

npm install --save-dev gulp

 

 

 

명령어를 넣어주면 밑에 진행바가 생겨 다운로드가 되었는지 확인된다.

 

그리고 package.json에  dependencies 에 gulp가 추가가 됩니다..

 

 

 

그리고 gulp는 gulpfile.js가 있어야 작동하므로 파일을 만들어줍니다.

 

const gulp = require('gulp');

gulp.task('default', function(done) {

    done();
});

 

 

 

걸프의 기본 세팅을 만들어주고 잘 되는지 작동시켜보겠습니다.

 

터미널에 gulp를 입력해주세요.

 

gulp

 

 

 

 

ES6를 사용하다 보면 사용하던 파일을 ES5로 바꾸는 일이 필요할 수도 있어 트랜스컴파일러라는 바벨 도구를 사용해 볼까한다.

 

npm install --save-dev gulp-babel @babel/core @babel/preset-env

 

 

 

그런 다음 바벨을 사용하기 위해 걸프 처럼 .babelrc 파일을 만들어 줍니다.

 

 

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

 

 

 

수정 후 gulpfile.js를 다음과 같이 수정해 줍니다.

 

 

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function(done) {

    gulp.src("public/es6/*.js")
        .pipe(babel())
        .pipe(gulp.dest("public/dist"));

    done();
});

 

 

 

그 다음 public 폴더를 만들어주시고요. 그 안에 es6폴더를 만들어 주세요

또, public 폴더 안에 dist를 만들어주세요.

 

 

 

 

그 다음에  es6에 잘 알지는 못하지만 es6폴더안에 몇가지를 써놓고 걸프로 실행해 보겠습니다.

 

es6폴더에 test.js라는 파일을 만들어 밑에 내용을 넣어주세요.

 

'use strict';

const sentences = [
    {subject: 'JavaScript', verb: 'is', object: 'great'},
    {subject: 'Elephants',  verb: 'are', object: 'large'},
];

function say({ subject, verb, object }) {
    console.log(`${subject} ${verb} ${object}`);
}

for(let s of sentences) {
    say(s);
}

 

 

그 다음 터미널에 걸프를 입력해주세요.

 

 

 

 

걸프가 끝난 다음에 보면 dist 폴더에 test.js가 생겨 납니다.

 

 

---

 

참고 : 이선 브라운의 러닝 자바스크립트

(http://www.yes24.com/Product/Goods/42806896?scode=032&OzSrank=9)