부트스트랩 템플릿으로 작업을 해야해서 파일을 다운받았습니다.
늘 제가 다 만들어서 사용했어서 부트스트랩, material 같은 ui툴을 사용해본 적이 없었던 저는 참 신기하더라구요.
구조를 살펴보니, gulp를 이용해서 scss와 여러가지 플러그인들까지 만들어놨더라구요.
그런데 바벨은 연동이 안되어 있지 뭡니까.. 그래서 딱 바벨까지만 연동하기위해 gulp문서와 구글링을 했습니다.
바벨로 es6이상의 문법을 es5로 다운그레이드하기 위해 설치해야 하는 것들입니다.
$ npm i -D gulp gulp-babel @babel/core @babel/preset-env
root에 .babelrc를 만든 후, 아래 내용을 포함합니다.
{
"presets": [
"@babel/preset-env"
]
}
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;