Edited at

ES6 で書く環境を作る(gulp + Babel 編)

More than 3 years have passed since last update.

前回の投稿(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



手順


gulpgulp-babel をインストール

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

$ mkdir work

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

$ cd work

$ npm init

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

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

$ npm install --save-dev gulp

$ npm install --save-dev gulp-babel

すると node_modules ディレクトリに gulpgulp-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']);



このプロジェクトのルート直下の .es6 ファイルを Babel で変換する、という内容です。gulp.watch で、ファイルの変更を監視しています。



変換してみる

適当に ES6 の記法でスクリプトを書き、

gulp を実行すると、

$ cd work

$ gulp

次のように変換されます。

gulp のタスクによりファイルの変更が監視されているので、スクリプトを保存する度に自動的に変換されます。


動作確認

ブラウザで動作確認してもいいのですが、console.log 程度なら次のようにコマンドでも確認できます。


ほか

gulp でソースマップも出力する方法は Babelの公式ページ に書いてあります。

あと gulp 自体の使い方は ドットインストール の gulp入門 あたりが分かり易かったです。

(今回はいろいろ省きましたが、ちゃんとやれば gulp でもっと色々できそう。)