LoginSignup
90

More than 5 years have passed since last update.

gulpfileをES2015(ES6)で書く

Last updated at Posted at 2015-11-08

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90