読者です 読者をやめる 読者になる 読者になる

tacamy.blog

JavaScriptを勉強中の人のブログです。

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

varconstまたは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の構文でよさそう。