gulp + Babel 導入備忘録

#gulp + Babel 備忘録
個人的メモとして(情報が古くなっている可能性があるので参考にするときは注意)

## gulpインストール
1. nodeをインストール
1. 適当にディレクトリを作成
1. コマンドプロンプトを起動してディレクトリに移動 (`cd C:\gulp-test`)
1. `C:\gulp-test> npm init`
1. 色々聞かれるので答える(後で変更可能なので分からなかったらEnterで飛ばしてOK)
1. package.jsonが作られる
1. gulpをグローバルインストール `C:\gulp-test> npm install gulp -g`
1. 右のコマンドでバージョンが出たらOK `C:\gulp-test> gulp -v`
1. 8で表示されたバージョンを指定(`3.9.1`の部分)してローカルにもインストール `C:\gulp-test> npm install gulp@3.9.1 --save-dev`
1. 右のコマンドでローカルのgulpのバージョンが表示されたらOK `C:\gulp-test> gulp -v`

##Babelをインストール
1. ES2015用のpresetをインストール `C:\gulp-test>　npm install babel-preset-es2015 --save-dev`
1. gulpプラグインのBabelをインストール `npm install gulp-babel --save-dev`
1. babel-coreをインストール `npm install babel-core --save-dev`
1. ディレクトリ内に`.babelrc`を作成して以下を記述(ES2015用のプリセットを使うので)

```javascript:.babelrc
{
  "presets": ["es2015"]
}
```

##gulpfileの編集
1. ディレクトリ内に`gulpfile.js`を作成して以下の設定を記述
1. 例としてルート直下にes2015フォルダとjsフォルダを作成
 
```javascript:gulpfile.js
var gulp = require('gulp'); //gulp本体の読み込み
var babel = require('gulp-babel'); //gulpプラグインの読み込み　今回はbabel
 
// babel
//各処理を実行した結果を.pipe()で次に渡してあげてる
gulp.task('babel', function () { //このタスクにbabelって名前をつける
    gulp.src('./es2015/script.js') //変換したいES2015で記述したファイルを指定
    .pipe(babel()) //babel()でバベってくれと記述
    .pipe(gulp.dest('./js')); //gulp.dest()でファイルの書き出し 今回はjsフォルダに
});
```

##ES2015ファイル作成

1. es2015フォルダの中に`script.js`を作成 ES2015で色々書いてみる

```javascript:/es2015/script.js
//class構文
class Person{
  constructor(name, mt){
    this.name = name;
    this.mt = mt;
  }
  climb() {
    console.log(`${this.name} is climbing ${this.mt}`); //テンプレートリテラル
  }
}

let kokona = new Person('Kokona', 'Mt.Takao');
kokona.climb();
```

##トランスパイルする
1. Babelを実行 `C:\gulp-test> gulp babel`
1. 変換されたファイルがjsフォルダの中にscript.jsとして作られる

```javascript:/js/script.js
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

//クラス構文
var Person = function () {
  function Person(name, mt) {
    _classCallCheck(this, Person);

    this.name = name;
    this.mt = mt;
  }

  _createClass(Person, [{
    key: 'climb',
    value: function climb() {
      console.log(this.name + ' is climbing ' + this.mt + '.'); //テンプレートリテラル
    }
  }]);

  return Person;
}();

var kokona = new Person('Kokona', 'Mt.Takao');
kokona.climb();
```

##トランスパイルしたのを確認してみる
1. 試しに適当なhtmlファイルを作ってes2015対応していないIE11(https://kangax.github.io/compat-table/es6/)
で読み込んでみる
![es2015-babel-IE.png](https://qiita-image-store.s3.amazonaws.com/0/267011/8707e579-97cb-791d-9a02-0d1a4f451875.png)
できました

ちなみにes2015フォルダの方のscript.jsを読み込むと当然無理
![es2015-IE.png](https://qiita-image-store.s3.amazonaws.com/0/267011/f80c98f8-eadd-778a-92bc-062e990c4304.png)

##参考
- [GulpでBabelを使ってみる](http://cly7796.net/wp/other/try-using-babel-in-gulp/)
- [ES6 で書く環境を作る（gulp + Babel 編）](https://qiita.com/hkusu/items/9b312274b3ff2913e15b)