zukucode
主にWEB関連の情報を技術メモとして発信しています。
gulp

gulpをES2015で実装する

gulpをES2015(ES6)で実装するための手順です。

gulpのインストール

gulpがインストールされていない場合はインストールします。（nodejsは導入済みとします。）

グローバルとローカルの両方にインストールします。

グローバル
$ npm install -g gulp
ローカル
$ npm install --save-dev gulp

babelのインストール

babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。

以下の４つのパッケージをインストールします。

  • babel-cli
  • babel-core
  • babel-preset-es2015
  • babel-preset-stage-0
$ npm install --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-stage-0

設定ファイルの作成

.babelrcという名前のファイルをプロジェクトのルートフォルダに作成します。

このファイルを作成しておけば、babelを実行する時に自動でこの設定ファイルを読み込みます。

.babelrc
{
  "presets": ["es2015", "stage-0"]
}

設定内容は必要に応じて書き換えてください。

gulpfileの作成

gulpのタスクを実装するファイルを作成します。

babelを使わない場合はgulpfile.jsというファイル名ですが、今回はbabelを使用するため、gulpfile.babel.jsというファイル名になります。こうすることにより、gulpが自動的にbabelを読み込むようになります。

これでgulpをES2015で実装する環境が整いました。

動作確認

gulpfile.babel.jsを以下のように実装します。

gulpfile.babel.js
import gulp from 'gulp';

gulp.task('default', () => {
  console.log('gulpをES2015で実装する');
});

そして、以下のコマンドを実行すると「gulpをES2015で実装する」と出力されればOKです。

$ gulp
gulp

関連記事