前回の話

babel-cliの環境を構築し、ECMAScript6のコードをトランスコンパイルする
まで。

今回すること

今のままだと、ファイルごとに babel でトランスパイルする必要があり
面倒なので
makefileのように、一発でトランスパイルさせたいと思います
その時に、依存関係を解決させる　requireや
バックグラウンドでファイルが変更されたら自動的にトランスパイルする設定

を行おうと思います

gulp

gruntは少し古くさいという話があったので
gulpにします

まず　package.jsonを作ります
$npm init
ここでアプリ名やバージョン、スタートアップファイル等を選びますが
結構適当で大丈夫です

gulp、gulp-babelのインストール
$npm install -g gulp-babel
$npm install --save-dev gulp
$npm install --save-dev gulp-babel

ファイル監視時にエラー発生時に停止しなくするプラグイン
$npm install --save-dev gulp-plumber

ソースマップを作成する
$npm install --save-dev gulp-sourcemaps

そして、自動ビルド用の設定ファイル　gulpfile.js　作成

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');
var plumber = require('gulp-plumber');
var sourcemaps = require("gulp-sourcemaps"); 
var src = ['test.js'];

gulp.task('build', function () {
  return gulp.src(src)
    .pipe(plumber())
    .pipe(sourcemaps.init()) 
    .pipe(babel())
    .pipe(sourcemaps.write(".")) 
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function () {
  gulp.watch(src, ['build']);
});

gulp.task('default', ['build']);

var src=　の配列に、変換元のファイルを入れます
.pipe(gulp.dest('./dist'));　ここは　変換後のディレクトリ

$gulp build
で、ファイルを全部ビルドします

$gulp watch
をすると、ファイルに変更がはいると自動的にビルドしてくれます

とりあえず　これが簡単なgulpの設定です

おまけ

babel-plugin-asm-js
を使えば、ECMAScript6+Flow　で書いた　型付きのJavaScriptを
asm.jsに変換してくれると夢をみていたが
どうやらコミットも　現時点で 2015年７月でとまってるし
パッケージにもミスがあったり、issueが消化出来てなかったり
実用するには難しそうだ・・・

このプラグインを期待してbabel導入したのに・・・

asm.jsを手書きするか
結局 C++からemscriptenするしかないのか・・・

ECMAScript6を書きたい part2 (babel、gulp)

前回の話

今回すること

gulp

おまけ