GulpでBabelを使ってみる

ES2015をES5に変換できるBabelをGulpで使ってみます。

設定方法

Gulpを使用するので、あらかじめ使えるように準備しておきます。
インストールについては以前に記事で紹介しているので省略します。
Gulp.jsの導入～Sassのコンパイルまで試してみた

Gulpの準備完了後、Babelをインストールします。

npm install -g gulp-babel

作業ディレクトリへ移動します。

cd 作業ディレクトリ

プロジェクトファイルを作成します。

npm init

作業ディレクトリにもGulpをインストールします。

npm install gulp --save-dev

ES2015用のpresetをインストールします。

npm install babel-preset-es2015 --save-dev

.babelrcを作成して下記を記述します。

.babelrc

{
  "presets": ["es2015"]
}

GulpプラグインのBabelをインストールします。

npm install gulp-babel --save-dev

gulpfile.jsに設定を記述します。

gulpfile.js

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

// babel
gulp.task('babel', function () {
	gulp.src('./es/script.js')
	.pipe(babel())
	.pipe(gulp.dest('./js'));
});

使い方

esディレクトリを作成して、下記内容でscript.jsを作成します。

es/script.js

const test = 'テスト';
console.log(test);

Babelを実行します。

gulp babel

js/script.jsが以下の内容で出力されました。

js/script.js

'use strict';

var test = 'テスト';
console.log(test);

【参考サイト】

• BabelでES2015の自動コンパイル環境を作る（Browserify / gulp / Grunt / webpack） | mae’s blog
• ES6の概要と、最新ブラウザに対応させる「Babel」の使い方 | ES6のある星に生まれて
• Babelを6系にアップデートしたらgulpでこける – Qiita