gulpfileをES2015(ES6)で書く

今までもgulpfile.js経由でgulpfile.es6を呼ぶ方法で書けたようですが、
gulp 3.9.0以降、ES2015で書いたgulpfileが直接使えるようになったそうなので検証してみた。

ES6 In Your Gulp Tasks

gulpのアップデート

$ npm upgrade gulp 
$ npm upgrade -g gulp
$ gulp -v
[15:37:36] CLI version 3.9.0

babelのインストール

$ npm install -D babel

gulpfileをES2015で書く

ファイル名をgulpfile.babel.jsにするのがポイント

gulpfile.babel.js

import gulp from 'gulp';
import browserify from "browserify";
import source from "vinyl-source-stream";

gulp.task("default", () => {
  browserify({
      entries: ["./src/app.es6"]
    })
    .bundle()
    .pipe(source("app.js"))
    .pipe(gulp.dest("./build"));
});

実行するとimportでコケる

./gulpfile.babel.js:1
(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp';
                                                              ^^^^^^

SyntaxError: Unexpected reserved word
...

ES2015のPresetが必要

Babelを6系にアップデートしたらgulpでこける - Qiita

importを使うには下記のpresetが必要なのでインストールする。
ES2015 preset · Babel

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

presetsの設定を.babelrcもしくはpackage.jsonに記述(どちらか一方でOK)

.babelrc

{
  "presets": ["es2015"]
}

package.json

{
...
  "babel": {
    "presets": ["es2015"]
  }
}

再度実行

$ gulp
[15:34:28] Requiring external module babel-core/register
[15:34:31] Using gulpfile ./gulpfile.babel.js
[15:34:31] Starting 'default'...
[15:34:31] Finished 'default' after 17 ms

所感

今のところgulpfileをES2015で書くメリットはあまりないし、
coffeeで書いたほうが直感的に書けるものの、
せっかくES2015を書くんだし揃えておきたいので、
しばらくはgulpfile.babel.jsで運用してみることにする。