快適な開発環境を目指して（Gulp + Browserify + ES6）

参考：

Using ES6 with gulp — Mark Goodyear — Front-end developer and designer

gulp 3.9からgulpfile.jsにES6が使えます。 JavaScriptを使うなら早めに慣れておきたいところ。

前の記事で作ったgulpfileをES6で書き換えてみましょう。

uraway.hatenablog.com

前準備

まずバージョンを確かめる。

gulp -v

3.9以上なら大丈夫。

CLI version 3.9.0
Local version 3.9.0

3.9未満ならアップデートしておく。

npm install gulp && npm install gulp -g

ES6 gulpfileを作る

Babelとes2015プリセットをインストール。

npm install babel-core babel-preset-es2015 --save-dev

.babelrcコンフィグファイルにes2015プリセットを設定。

{
  "presets": ["es2015"]
}

gulpfile.jsをgulpfile.babel.jsにリネーム。
これでgulpをES6を使って書くことができます。

'use strict'

import browserify from 'browserify';
import gulp       from 'gulp';
import source     from 'vinyl-source-stream';


gulp.task('browserify', () => {
    return browserify('./public/javascripts/app.js')
        .bundle()
        //Pass desired output filename to vinyl-source-stream
        .pipe(source('bundle.js'))
        // Start piping stream to tasks!
        .pipe(gulp.dest('./build/'));
});

gulp.task('default',['browserify']);

ここではimport/modules、arrow functionsを使っています。 ES6の特徴はECMAScript 6: New Features: Overview and Comparisonで確認。