今回言いたいことは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 は 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】コマンドが日本語化されるバグが修正されていない件についての通り直してやる。

必要な物をインストールする

開いているコマンドプロンプトで以下を入力する

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を選択する。

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しか用意してなかったから一つしか出てこないけど

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

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

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

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

'use strict';

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

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

2. gulpfile 自体を es6 で書く

わかりにくければ、gulpfileをES2015(ES6)で書くを参考にしてください

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

参考：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

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

結論

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

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

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

環境