gulpfile.jsをES6で書いてみよう
なぜgulpfile.jsをES6で書くの?
ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.js
で試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。
- 他への影響が少ない
- コードの分量が少ない
- 実装にあまり頭を使わないで書ける
- 環境によってはbabel等のトランスパイラをインストールせずにES6がそのまま使える
環境を準備する
gulpfile.js
でES6を使えるようにするには、gulp側で対応するか、Node.js側で対応するかどちらかになります。
gulp側でES6に対応する
gulpはv3.9.0からbabelを標準サポートするようになったので、babelを介してES6構文を利用できるようになりました。
ただし、ES6構文を使う場合は、ファイル名をgulpfile.babel.js
にする必要があります
- gulpのバージョンを3.9.0以上にupdate
gulpfile.js
のファイル名を、gulpfile.babel.js
に変更
Node.js側でES6に対応する
Node.jsはv4.0.0からES6に(一部)対応したので、Node.jsのバージョンが4.0.0以上であれば、そのままES6の構文を使うことができます。
- Node.jsのバージョンを4.0.0以上にupdate
- ファイル名は
gulpfile.js
のままでよい
ちなみに、この記事はNode.js 5.0.0で動作確認しているので、それ以下のバージョンの場合は動かないものもあるかも?(参考:Node.jsでサポートしているES6の構文の一覧)
gulpfile.jsで使いそうなES6構文いろいろ
ES6の構文を使うと言っても、gulpfile.js
では簡単なものしか使う機会はなさそうですが、実際に使いそうな構文をいくつか挙げておきます。
const / let
var
をconst
またはlet
に置き換えられます。
ただし、let
はあまり使う箇所はなさそう。
今までの書き方
var gulp = require('gulp');
ES6の書き方
const gulp = require('gulp');
Arrow Functions
function ()
を() =>
と書けるようになります。
本来の外側のthis
が使えるという機能はgulpfile.js
の場合あまり関係なさそうで、単にタイプ数が少し減ったり、見た目がスッキリするといったメリットくらいかな。
今までの書き方
gulp.task('copy', function () { return gulp.src('src/favicon.ico') .pipe(gulp.dest('dist')); });
ES6の書き方
gulp.task('copy', () => { return gulp.src('src/favicon.ico') .pipe(gulp.dest('dist')); });
Template Strings
文字列と変数を結合するような場合に、'string' + foo
のように+
を用いていた部分を、string#{foo}
のように書けるようになります。
今までの書き方
gulp.task('sprite', function () { var spriteData = gulp.src('images/*.png').pipe(spritesmith({ cssVarMap: function(item) { item.name = 'b-icon--' + item.name; } })); return spriteData.pipe(gulp.dest('path/to/output/')); });
ES6の書き方
gulp.task('sprite', () => { const spriteData = gulp.src('images/*.png').pipe(spritesmith({ cssVarMap: item => { item.name = `b-icon--${item.name}`; } })); return spriteData.pipe(gulp.dest('path/to/output/')); });
注意点
gulpfile.babel.js
の場合はbabelを使うのでimport
が使えるけれど、gulpfile.js
の場合はimport
が使えません。
Node.js(v5.0.0時点)ではimport
がサポートされていないからです。そのため、ES6をどうやって実行するかによって(ファイル名によって)、次のように記述が変わります。
ややこしいのでどっちの場合でもimport
は使わない方がいいのかもしれません。
gulpfile.babel.js
import gulp from 'gulp'
gulpfile.js
const gulp = require('gulp');
まとめ
とくに問題なく使えたので、これからgulpfile.jsを新たに書く場合はES6の構文でよさそう。