node 4.0以上出たけど、gulpfile.babel.jsの書き方って何か変わるの？

## まずは普通に試してみた結果
そういえば `Node.js ~> 4.0.0` が出てから何もしてねーな、と思って軽く[こっちの記事](http://qiita.com/lion-man44/items/9b740aea439ef5643048)を参考にしながらやってみようとしてみたけど、10分ほどハマった感じだったので記事化しとこうと思った

単純に下記のような書き方をしたらとりあえず動くのかな、って思って試してみたけど、当然これだと動きません

```js
import gulp from 'gulp'
import gulpWebserver from 'gulp-webserver'

gulp.task('serve', () =>
  gulp.src('./')
    .pipe(
      gulpWebserver({
        livereload: true,
        port: 8001,
        fallback: 'index.html',
        open: true
      })
    );
);

gulp.task('default', ['serve'])
```

まず普通のNode.jsだと `import` 文が解釈できません
なので、認識させる為にはES2015の文法を `gulp` が知っておく必要があります

しかし、中途半端に情報を入れていた私は `gulpfile.babel.js` を用意すれば普通にいけるんじゃないの？と勘違いしていました

最近だと `babel-core` がバージョン変わったらしく、 `6.0.2` が出ていました
それに伴い `babel` のバージョンも **6** になったらしいのですが、普通にこれだとプリセットが足らずに怒られます

ただしエラーからはその内容が汲み取れません

```js
(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp'
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at Object.Module._extensions..js (module.js:432:10)
```

そのことで [issue](https://github.com/gulpjs/gulp/issues/1360) に書いている人もいますね
（バッサリとウチの問題じゃなくて、「babelの問題だ」って返答してますね）

その結果、[こっちの記事](https://babeljs.io/blog/2015/10/29/6.0.0/)に誘導されます
さて、その結果わかったことは
`npm i --save-dev babel-preset-es2015`
こうしろと書かれていますね :+1: 

## `babel-preset-es2015` が終わったあと

installしたあとにもう一回動かしてみると

```js
(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
```

まだ怒られます :disappointed: 
まだ理解できないようです

そして先ほどの記事には `.babelrc` に

```json
{
  "presets": ["es2015"]
}
```

な内容を書け、と書いてあります
なので、従います

最終的なファイル構成はこうなりました

```
-rw-r--r--    1 l-03-003  staff    150 11  6 11:54 index.html
drwxr-xr-x    3 l-03-003  staff    102 11  6 11:58 ..
-rw-r--r--    1 l-03-003  staff    402 11  6 12:13 package.json
drwxr-xr-x  295 l-03-003  staff  10030 11  6 12:13 node_modules
-rw-r--r--    1 l-03-003  staff    291 11  6 12:51 gulpfile.babel.js
drwxr-xr-x    7 l-03-003  staff    238 11  6 12:54 .
-rw-r--r--    1 l-03-003  staff     28 11  6 12:54 .babelrc
```

## presetも用意した、設定ファイルも書いた、あとは

```js
[12:27:33] Requiring external module babel-core/register




/Users/l-03-003/Developments/js/gist/test-babel/node_modules/babel-core/lib/transformation/file/index.js:546
      throw err;
      ^

SyntaxError: /Users/l-03-003/Developments/js/gist/test-babel/gulpfile.babel.js: Unexpected token (13:5)
  11 |     //    open: true
  12 |     //  })
> 13 |     );
     |      ^
  14 | );
  15 |
  16 | gulp.task('default', ['serve'])
```

おお、動いた！
しかしエラーが出てる箇所がよく分からないってなりますよね（少なくとも自分はそうなった）

```js
import gulp from 'gulp'
import gulpWebserver from 'gulp-webserver'

gulp.task('serve', () =>
  gulp.src('./')
    .pipe(
      gulpWebserver({
        livereload: true,
        port: 8001,
        fallback: 'index.html',
        open: true
      })
    ); <- ここで問題が起きている
);

gulp.task('default', ['serve'])
```

原因は掴めていないのですが、この場所の `;` が問題なようです
消すと普通に動きました :exclamation: 
（ `;` ってどこまでサポートしてくれてるのかな）

```js
$ ./node_modules/.bin/gulp
[12:28:44] Requiring external module babel-core/register
[12:28:44] Using gulpfile ~/Developments/js/gist/test-babel/gulpfile.babel.js
[12:28:44] Starting 'serve'...
[12:28:44] Webserver started at http://localhost:8001
[12:28:44] Finished 'serve' after 44 ms
[12:28:44] Starting 'default'...
[12:28:44] Finished 'default' after 14 μs
```

これでまた、自由に開発できますね :smiley: