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のトランスパイル用プラグインをインストール

 ```terminal
$ 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 編）(ほぼ、そのままですみません..)