Edited at

gulpfileをES2015(ES6)で書く

More than 3 years have passed since last update.

今までも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)

{

"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で運用してみることにする。