サイト制作に関するメモ書き

HOME > その他 > GulpでBabelを使ってみる

GulpでBabelを使ってみる

ES2015をES5に変換できるBabelをGulpで使ってみます。

設定方法

Gulpを使用するので、あらかじめ使えるように準備しておきます。
インストールについては以前に記事で紹介しているので省略します。
Gulp.jsの導入~Sassのコンパイルまで試してみた

Gulpの準備完了後、Babelをインストールします。

npm install -g gulp-babel

作業ディレクトリへ移動します。

cd 作業ディレクトリ

プロジェクトファイルを作成します。

npm init

作業ディレクトリにもGulpをインストールします。

npm install gulp --save-dev

ES2015用のpresetをインストールします。

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

.babelrcを作成して下記を記述します。

.babelrc

{
  "presets": ["es2015"]
}

GulpプラグインのBabelをインストールします。

npm install gulp-babel --save-dev

gulpfile.jsに設定を記述します。

gulpfile.js

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

// babel
gulp.task('babel', function () {
	gulp.src('./es/script.js')
	.pipe(babel())
	.pipe(gulp.dest('./js'));
});

 

使い方

esディレクトリを作成して、下記内容でscript.jsを作成します。

es/script.js

const test = 'テスト';
console.log(test);

Babelを実行します。

gulp babel

js/script.jsが以下の内容で出力されました。

js/script.js

'use strict';

var test = 'テスト';
console.log(test);

 

【参考サイト】

 

“GulpでBabelを使ってみる” への1件のコメント

  1. […] GulpでBabelを使ってみる […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP