gulp와 babel 연동하기

김수정·2020년 6월 16일
0

Intro

부트스트랩 템플릿으로 작업을 해야해서 파일을 다운받았습니다.
늘 제가 다 만들어서 사용했어서 부트스트랩, material 같은 ui툴을 사용해본 적이 없었던 저는 참 신기하더라구요.

구조를 살펴보니, gulp를 이용해서 scss와 여러가지 플러그인들까지 만들어놨더라구요.
그런데 바벨은 연동이 안되어 있지 뭡니까.. 그래서 딱 바벨까지만 연동하기위해 gulp문서와 구글링을 했습니다.

install

바벨로 es6이상의 문법을 es5로 다운그레이드하기 위해 설치해야 하는 것들입니다.

$ npm i -D gulp gulp-babel @babel/core @babel/preset-env
  • gulp: 걸프
  • gulp-babel: 걸프를 이용해 바벨을 사용할 수 있게 해주는 패키지
  • @babel/core: gulp-babel의 peer dependency라는데 그게 무슨 말인지는 모르겠음..
  • @babel/preset-env: 최신 자바스크립트를 변환해주는 패키지.

babel 설정

root에 .babelrc를 만든 후, 아래 내용을 포함합니다.

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

gulp 설정

gulp-babel을 불러오고, task를 만듭니다.
불러올 파일들을 src에 담고, babel처리를 돌린 후, 결과물을 저장할 공간 주소를 dest에 지정하면 됩니다.
파일정리를 하기 전 코드이긴한데, babel을 먼저 돌린 후에, 다른 일은 jsTask라는 곳에서 진행하게 만들어뒀습니다.

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

function babelJs() {
  return gulp
    .src([
      './script/*.js'
    ])
    .pipe(babel())
    .pipe(gulp.dest('./js'))
}

const script = gulp.series(babelJs, jsTask);

exports.js = script;

gulp 문서
설치에 도움 받은 문서

profile
정리하는 개발자

0개의 댓글