メモブログ

技術的なことを書き連ねるブログ

gulpでbabelを導入する

まだブラウザだったりnodeで対応していない箇所もあるけど、
そろそろES6の勉強もしないとなぁということで、手っ取り早くgulpにbabelを導入することにしました。

f:id:resistance_underground:20160525215925p:plain

https://babeljs.io/

インストール

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

babelのバージョンが上がったため、
gulp-babelだけだと es6→es5 に変換してくれない。
変換用のプリセットが必要です。

ここに色々まとめてあります。
React.js用のプリセットもあるようですね。
babeljs.io

gulpfile.jsはこんな感じ

const gulp = require('gulp');
const webserver = require('gulp-webserver');
const babel = require('gulp-babel');
const rename = require('gulp-rename');
const plumber = require('gulp-plumber');

gulp.task('webserver',function(){ // ローカルサーバー立ち上げ
	gulp.src('./')
		.pipe(webserver({
			host: '0.0.0.0',
			port: 8888,
			livereload: true
		}));
})

gulp.task('babel',function(){
	gulp.src('./*_es6.js')
		.pipe(plumber())
		.pipe(babel(
		{ presets: ['es2015']} // ここでプリセットを指定する
			))
		.pipe(rename(function(path){
			var len = path.basename.length - 4;
			path.basename = path.basename.slice(0, len);
			// renameモジュールを使って、hogehoge_es6.js(es6ファイル)を
			// distフォルダ内に hogehoge.js(es5ファイル)に変換&リネームして格納する
		}))
		.pipe(gulp.dest('dest'))
});

gulp.task('babel_watch', function(){
	gulp.watch('./*_es6.js', ['babel']) // ファイル監視
});


これを走らせてみる。

index_es6.js(変換前)

'use strict';

// 関数
var fn = () =>{
	console.log("hoge");
}

// 分割代入と入れ替え
var [a,b] = [22,"#"];
	[a,b] = [b,a];

index.js(変換後)

'use strict';

// 関数

var fn = function fn() {
	console.log("hoge");
};

// 分割代入と入れ替え
var a = 22;
var b = "#";
var _ref = [b, a];
a = _ref[0];
b = _ref[1];
_ref;


babelがすべてのES6に対応しているわけではないので、調べながら
使ってみようと思う。