ES6を使ふ。今直ぐ

node.jsとio.jsだが、node.js側が譲歩して、io.jsがnode.jsに戻るかもしれない。またnode.jsでもES6が少しは使へるやうになってきてゐる。Promise等[など]だ。ndenv (node-build) もio.jsに対応したが、それでわたしはnode.jsを使ひ続けてゐる。

AltJSでなくES6を使ふ

今、自サイトを作り直し始めた。五年間更新してゐなかったものだ。サーバー側はRanyuen/Littleを使ひPHPで書いてゐるが、クライアント側は当然JavaScriptである。完全な個人プロジェクトなので惜しみなくES6を使へるとおもって、traceur-compilerを導入してみた。
traceur-compilerとはGoogleの制作してゐる、ES6 (ECMAScript6) からES5へのコンパイラだ。わたしはAltJSを好かないが、ES6はよい。先をいくTypeScriptやFlowやAtScriptには頑張っていただいて、ES6を使っておく。ES6はいずれWebブラウザに直接実装されるはずだ。
traceur-compilerのWikiを見ると、classやmoduleやfor-ofやarrow関数式や、等、目ぼしいものには対応してゐる。
cf. https://github.com/google/traceur-compiler/wiki/LanguageFeatures
これをGulpを使ったワークフローに組み込んでみる。

Gulpでtraceur-compilerを使ふ

gulp-traceurを使ふ。

var gulp    = require('gulp'),
    traceur = require('gulp-traceur');

gulp.task('js-build', function () {
  return gulp.src('src/javascripts/*.js').
    pipe(traceur()).
    pipe(gulp.dest('lib/assets'));
});

普通だ。

traceur-compilerをワークフローに組み込む

わたしの通常のフローは、JavaScriptを書いた後、

1. ファイルの順番を指定し結合する。
2. UglifyJSで圧縮 (最適化) する。

ここにtraceur-compilerを入れる。

1. ファイルを指定し、traceur-compilerで通常のJavaScriptにする。
2. 順番どおりに結合する。
3. UglifyJSで圧縮 (最適化) する。

var gulp    = require('gulp'),
    concat  = require('gulp-concat'),
    traceur = require('gulp-traceur'),
    uglify  = require('gulp-uglifyjs'),
    merge   = require('merge-stream');

gulp.task('copy-assets', function () {
  return gulp.src([
      traceur.RUNTIME_PATH,
    ]).
    pipe(gulp.dest('lib/assets'));
});

gulp.task('js-build', function () {
  return merge([
    {
      src : [
        'src/javascripts/_wavable.js',
        'src/javascripts/index.js',
      ],
      dest : 'index.js'
    }
  ].map(function (set) {
    return gulp.src(set.src).
      pipe(traceur({modules : 'inline'})).
      pipe(concat(set.dest)).
      pipe(uglify({
        outSourceMap : true,
        output       : {},
        compress     : { unsafe : true },
      })).
      pipe(gulp.dest('lib/assets'));
  }));
});

gulp.task('build', ['copy-assets', 'js-build']);

各ファイルを指定しておいて、traceur()でコンパイルし、concat()で結合し、uglify()で圧縮 (最適化) してゐる。全ての出力をGulpに待たせる為に、merge()でストリームを合流させてゐる。
traceur-runtime.jsを別途Webブラウザにロードする必要があるので、サーバーの公開フォルダへコピーしてゐる。
テストは、jscsもjshintも esnext: true オプションをつければよいだけなので、割愛する。