Babel 사용법② - Babel + Gulp

지난번 에 이어, ES6의 빌드 환경 구축입니다.
이번에는 Babel과 태스크 러너의 Gulp를 조합한 경우의 빌드 환경을 만듭니다.

Babel + Gulp의 ES6 빌드 환경 구축

Babel built-systems -> Gulp

전제로 node.js, babel 및 gulp이 전역 설치되어 있다고 가정합니다.

gulp 명령을 찾을 수 없다는 메시지가 표시되면 gulp를 전역 설치하십시오.$ sudo npm install -g gulp

적절한 디렉토리를 준비

$ mkdir babel_test/cap2
$ cd babel_test/cap2

package.json 만들기$ npm init 에서 대화식으로 다음과 같은 파일을 만들었습니다 ↓

package.json

{
  "name": "babel-test-gulp",
  "version": "1.0.0",
  "description": "hoge",
  "repository": "piyo",
  "main": "index.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

실수는 description이라든지 repository가 비어 버려도 sudo vi package.json로 편집 할 수 있습니다.
(자신의 환경이라면 read-only인 package.json이 생성되었습니다)

Babel 명령 줄 도구 설치

 $ npm install --save-dev babel-cli

es2015 트랜스 파일 플러그인 설치

$ npm install --save-dev babel-preset-es2015

.babelrc 만들기

 $ touch .babelrc
 $ echo '{ "presets": ["es2015"] }' > .babelrc

gulp 관련 플러그인 설치

$ npm install --save-dev gulp
$ npm install --save-dev gulp-babel
$ npm install --save-dev gulp-rename

gulpfile.js 만들기 (gulp 작업 만들기)

gulpfile.js

 var gulp  = require("gulp");
 var babel = require("gulp-babel");
 var rename = require("gulp-rename");

 gulp.task("babel_build", function () {
     return gulp.src("src/*es6.js")
         .pipe(babel())
         // ".es6"という文字列を削る
         // path.basename -> sample.es6
         .pipe(rename(function (path) {
             var cutLength = path.basename.length - 4;
             path.basename = path.basename.slice(0, cutLength);
         }))
         .pipe(gulp.dest("dist"));
 });

 gulp.task('babel_watch', function() {
     gulp.watch('src/*es6.js', ['babel_build'])
 });

 // defaltタスクを作成しても良い（gulpだけで実行出来る）
 // gulp.task('default', ['babel_build', 'babel_watch']);

gulp-rename은 컴파일 후 파일 이름에서 .es6를 깎기 위해 사용되므로 Gulp에서 Babel을 움직이는 데 필수적인 것은 아닙니다.

컴파일 원본 파일 만들기
기본 파라미터와 애로우 함수를 이용.

src/sample.es6.js

 setTimeout((hoge = "ほげ") => {
        console.log(hoge);
 }, 500);

시계 컴파일하기

 $ pwd # -> ~/babel_test/cap2
 $ gulp babel_watch

(배경이 스케스케인 것은 신경쓰지 않고)

비고

gulpfile.js를 ES6로 작성하려면 다음 조치가 필요합니다.

gulpfile.js -> gulpfile.babel.js로 이름 바꾸기

presets의 설정을 gulpfile.babel.js에 기술하지 않고, .babelrc or package.json에 기술한다
(import 구문 등으로 이끼)

참고 기사

Babel built-systems -> Gulp
gulp에서 자주 사용하는 패키지 메모
ES6로 쓰는 환경 만들기(gulp + Babel편) (거의, 그대로 죄송합니다..)