gulpでES6(ES2015)への変換環境の基本設定メモ

ES2015を学ぼうと思い、gulpでビルドできるようにしたいと思います。
それのメモです。

packege.jsonを生成

npm init

全部Enterでとにかく生成

各モジュールのインストール

npm i -D gulp
npm i -D gulp-babel
npm i -D babel-preset-es2015

package.jsonはこんなのが並ぶ

"devDependencies": {
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2"
}

ここで、gulp-babelが6.x.x以上なので.babelrcが必要

そのために、babel-preset-es2015のモジュールをインストールしていた。

.babelrcファイルの作成

{
"presets": ["es2015"]
}

gulpfile.jsを作成

var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('babel', function(){
gulp.src('src/js/*.js')
.pipe(babel())
.pipe(gulp.dest('dist/js'))
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['babel'])
});
gulp.task('default', ['babel', 'watch'])

ディレクトリの確認

.
├── .babelrc
├── dist
│   └── js
│   └── app.js
├── gulpfile.js
├── package.json
└── src
└── js
└── app.js

使い方

gulpコマンドを実行後
/src/js/app.jsを編集すれば、/dist/js/app.jsが生成されます。
あくまでもこれは現在ブラウザ対応するために変換しそれを確認するだけのためのものです。
gulpの使い方がわかる方はあとはごにょごにょカスタマイズして楽しめばいいと思います。
わからない方は、dotinstall gulp入門をやればいいと思います。