Visual Studio Codeで gulp + babel 始めました

今回言いたいことは3つ
1. gulp で es6 で書かれたファイルをコンパイル(?)する
2. gulpfile 自体を es6 で書く
3. visual studio code(以下vscode)から動かす

## 環境
OS：windows 8です。

||version|
|---|---|
|vscode|1.0.0|
|node|v0.12.7|
|npm|2.11.3|
|gulp|3.9.0|
|babel|6.5.2|
|babel-core|6.8.0|
|babel-preset-es2015|6.6.0|
|gulp-babel|6.1.2|

# 1. gulp で es6 で書かれたファイルをコンパイルする

## どういう構成になるのか
自分の理解のまとめとして。
1. [babel](https://babeljs.io/) は es6のjsをes5に書き直してくれる。
2. gulpでwatchしていれば、es6のjsが変更された時に書きなおせば良い。
だからこんな感じ

```
(任意のフォルダ)/
├ src/   // 入力元のフォルダ
├ dest/  // 出力先のフォルダ
├ gulpfile.js
└ package.json
```

## vscodeを起動しておく
フォルダを起点として、vscodeを起動しておく。

```
(任意のフォルダ)>code .
```
逆にvscodeからコマンドプロンプトを開く場合は、Ctrl + Shift + c 。npmを使いたくなるので、案外便利。
ただいらんところ（コマンドパレット）まで日本語されているので
[【Visual Studio Code】コマンドが日本語化されるバグが修正されていない件について](https://blogs.msdn.microsoft.com/ayatokura/2016/04/15/%E3%80%90visual-studio-code%E3%80%91%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%8C%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%E3%81%95%E3%82%8C%E3%82%8B%E3%83%90%E3%82%B0%E3%81%8C%E4%BF%AE%E6%AD%A3%E3%81%95/)の通り直してやる。

## 必要な物をインストールする
開いているコマンドプロンプトで以下を入力する

```
npm init
npm install babel --save
npm install babel-core --save
npm install babel-preset-es2015 --save
npm install gulp --save
npm install gulp-babel --save
```

## 作成されたpackage.jsonに以下を追記する
これしなかったら、コンパイルされず、es6のコードがそのまま出力されてた

```
{
(中略)
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}
```

## コンパイル対象のファイルを作成する
一応、コンパイル後に吐き出される先のフォルダも作成しておく

```
(任意のフォルダ)/
├ src/test.js // 入力元のes6で書かれたjs
└ dest/  //出力先のフォルダ
```

test.jsの中身は以下のとおり(何も面白いところはない

```
() => {
  return '';
};
```

## gulpfile.jsの作成する

vscode上でプロジェクトルートにgulpfile.jsを作成する。
中身は今回、以下の様な感じで作ってます。

```
var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function() {
  return gulp.src(['src/*.js', 'src/**/*.js'])
        .pipe(babel())
        .pipe(gulp.dest('dest'));
});
```

## 結果
下記構成になっているはず

```
(任意のフォルダ)/
├ node_modules/
├ src/test.js // 入力元のes6で書かれたjs
├ dest/  //出力先のフォルダ
├ gulpfile.js
└ package.json
```

## vscodeで動かす
ctrl + shift + pでコマンドパレットを開いて Tasks: Configure Task Runnerを選択する。
<img width="534" alt="tasks.png" src="https://qiita-image-store.s3.amazonaws.com/0/75299/ed2dbe10-63e7-841f-b6d7-ffb9c0a41f21.png">

task runnerの選択を要求されるので、今回はgulpを選択する。
するとルートディレクトリ以下にvscodeの設定ファイルが置かれるフォルダが作成され、そこにtasks.jsonが作られる。(settings.jsonを各プロジェクトごとに作製している人はフォルダはすでにあるでしょうけど

```
(任意のフォルダ)/
└ .vscode
  └ tasks.json
```

中身は以下のとおり

```
{
	// See http://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"args": ["--no-color"],
	"showOutput": "always"
}
```

ctrl + pでパレットを開いて task と打つとgulpファイルを参照してくれてどんなタスクがあるのかを表示してくれている。(今回defaultしか用意してなかったから一つしか出てこないけど

<img width="496" alt="taskrun.png" src="https://qiita-image-store.s3.amazonaws.com/0/75299/a380c599-3dcc-a8b5-c10e-fba8573b924a.png">

defaultを選択するとタスクが走っているのが確認できます。

<img width="737" alt="result.png" src="https://qiita-image-store.s3.amazonaws.com/0/75299/d7fd5a4c-5956-d51b-afe8-5d9d9f7764e6.png">

ファイルが作成されているので、

```
(任意のフォルダ)/
└ dest
  └ test.js
```

この中身を見てみるとコンパイルされていた。

```
'use strict';

(function () {
  return '';
});
```

あとはwebpackでもbrowserifyでもお好きにどうぞ。

# 2. gulpfile 自体を es6 で書く

わかりにくければ、[gulpfileをES2015(ES6)で書く](http://qiita.com/kosuke_nishaya/items/cf7f8a2dbb8e47d064fd)を参考にしてください

ここまできて、ひとつ疑問に思ったのが、gulpをつかってbabelの書き直しをしてもらうわけですが、gulpfileはbabelでは書けないのかなということ。
「僕が君を守る」→「じゃあ、誰がアナタを守るの？」的漫画の発想（こじらせすぎ）
gulpのバージョンが3.9.0以上だと以下の方法で書くことができる

参考：[ES6 In Your Gulp Tasks](https://stephensauceda.com/es6-in-your-gulp-tasks/)

## gulpfile.js を書き換える
中身を以下のように単純に書き換えた。

```
import gulp from 'gulp';
import babel from 'gulp-babel';

gulp.task('default', () => {
  return gulp.src(['src/*.js', 'src/**/*.js'])
        .pipe(babel())
        .pipe(gulp.dest('dest'));
});
```

## gulpfile.js を gulpfile.babel.js というファイル名にする
表題の通り

## vscodeでデバッグする
ctrl + pで task と打つと候補が出てくるので(ry

<img width="740" alt="result2.png" src="https://qiita-image-store.s3.amazonaws.com/0/75299/46747994-fb44-42c4-4dbd-701ebc340753.png">

babel-coreを使って動いているのが確認できる。作成されたファイルも同様のものが確認された。

# 結論
1. gulp で es6 で書かれたファイルをコンパイルできる環境が作成できた
2. gulpfile 自体を es6 で書く事ができた（）
3. vscodeから動かす事ができた

多分これでvscodeの環境としては整ったはず。
個人的にはvscodeからpm2を動かしたいけど(意味は無い)、task runnerをnpmにしてやってしまえば行けるはず……多分。