GulpとBabelでES2015をES5に変換する環境をつくる

前回の記事でES2015の文法について覚えたので、今回はES2015をES5に変換するための環境をつくります。

参考：

Node.js

Node.jsとは

サーバーサイドのJavaScript、非同期の処理が得意。

インストール

方法は色々とありますが、今回はnodebrewというバージョン管理ツールを利用してインストールします。 ターミナルを開いて以下のコマンドを実行。 nodebrewのインストールが開始されます。

$ curl -L git.io/nodebrew | perl - setup
========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

インストール後、環境設定ファイルにnodebrewのパスを通してねと言われるので、.bash_profileをviエディタで開き、コードを追記します。

$ vi ~/.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH

sourceコマンドで.bash_profileをリロードします。

$ source ~/.bash_profile

nodebrewがインストールされているか確認。

$ nodebrew help
nodebrew 0.9.5

Usage:
    nodebrew help                         Show this message
...

nodebrewをインストールし終わったら、Node.jsの使用するバージョンを指定します。今回は安定版を指定しました。 -vコマンドでバージョンを確認してNode.jsのインストール完了です。

$ nodebrew use stable
use v5.10.1
$ node -v
v5.10.1

npmをインストール

Node.jsで書かれたツールを管理するnpmというパッケージ管理ツールをインストールします。Rubyでいうとgemのようなやつです。 プロジェクト用のディレクトリを作成し、ターミナルでその中へ移動します。今回はpractice/es2015devというディレクトリを作成しました。

$ cd practice/es2015dev

移動したら以下のコマンドでpackage.jsonを作成します。 対話形式で任意の項目を入力します。今回は全てEnterキーを押しました。

$ npm init

...
name: (es2015dev) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/XXXX/practice/es2015dev/package.json:

{
  "name": "es2015dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes

入力を終えると、ディレクトリ内にpackage.jsonが作成され、中には上の入力内容が記載されています。

Gulp

Gulpとは

様々な作業を自動化できる「タスクランナー」と呼ばれるツールです。Web制作においては、css,js,画像などの圧縮、Sassのコンパイル、ベンダープレフィックスの付与、LiveReloadなどを全て高速に行ってくれます。

インストール

以下のコマンドでGulpをインストールします。-gはグローバル領域にインストールするコマンドです。

$ npm install gulp -g

--save-devコマンドでローカルにもインストールします。

$ npm install gulp --save-dev

するとpackage.jsonにGulpが記載されます。

  "devDependencies": {
    "gulp": "^3.9.1"
  }

Gulpがグローバルとローカル両方に入っているか確認します。

$ gulp -v
[22:01:40] CLI version 3.9.1
[22:01:40] Local version 3.9.1

Babelをインストール

ES2016をES5記法に変換するBabelをローカルにインストールします。

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

.babelrcファイルを作成し、利用するpresetsを記述します。

{
  "presets": ["es2015"]
}

Gulpの設定ファイルをpackage.jsonと同じディレクトリに作成します。 Gulpはバージョン3.9.0からBabelを標準サポートするようになりました。設定ファイルの名前をgulp.jsではなくgulp.babel.jsにすることで、ES2015で設定ファイルを記述できるようになります。

'use strict';

const gulp = require('gulp');
const babel = require('gulp-babel');

// タスクの登録
gulp.task('js', () =>
  gulp.src('src/js/**/*.js') // 読み込むファイル
    .pipe(babel()) // babelを実行
    .pipe(gulp.dest('dist/js')) // 出力先
);

src/jsディレクトリを作成し、その中にES2015で記述したjsファイルを作成します。

const obj = {
  add: (a,b) => a + b
};

準備ができたので、gulpを実行します。

$ gulp js
[22:18:57] Requiring external module babel-register
[22:18:57] Using gulpfile ~/practice/es2015dev/gulpfile.babel.js
[22:18:57] Starting 'js'...
[22:18:57] Finished 'js' after 107 ms

/dist/jsディレクトリにES5変換後のjsファイルが生成されました。

"use strict";

var obj = {
  add: function add(a, b) {
    return a + b;
  }
};