More than 5 years have passed since last update.

ES6 で書く環境を作る（gulp + Babel 編）

Last updated at 2015-05-27Posted at 2015-05-22

前回の投稿(ES6 で書く環境を作る（WebStorm + Babel 編）)では Babel を WebStorm から実行しましたが、今回は WebStorm でなく gulp から実行してみます。
(柔軟性を考えると、こちらの方が良いかも。)

前提環境

OS：Mac OS X 10.9.5
Bable：5.4.7
gulp：3.8.11
gulp-babel：5.1.0
npm：2.7.5

手順

① `gulp` と `gulp-babel` をインストール

適当なプロジェクト用ディレクトリを作り、

$ mkdir work

次のコマンドで、このプロジェクトのルート直下に package.json を作成します。（対話インタフェースで色々聞かれますが適当に。）

$ cd work
$ npm init

私の場合は次のように作成されました。

package.json が作成されたら、このプロジェクト配下(グローバルでなく)に gulp と gulp-babel をインストールします。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-babel

すると node_modules ディレクトリに gulp と gulp-babel がインストールされ、package.json は次のようになりました。

package.json の作成は必須ではないのですが、後で本環境を $ npm install で再現できるようになるので、作成することをオススメします。また通常、node_modules ディレクトリは Git の管理から外します（package.json から再現できるものなので）。

② gulp のタスクを作成

このプロジェクトのルート直下に gulp 用の設定ファイル gulpfile.js を新規に作成し、

次のように記載します。

gulpfile.js

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task('babel', function() {
  gulp.src('./*.es6')
    .pipe(babel())
    .pipe(gulp.dest('./'))
});

gulp.task('watch', function() {
  gulp.watch('./*.es6', ['babel'])
});

gulp.task('default', ['babel', 'watch']);