Help us understand the problem. What is going on with this article?

ES6 で書く環境を作る(gulp + Babel 編)

More than 5 years have passed since last update.

前回の投稿(ES6 で書く環境を作る(WebStorm + Babel 編))では Babel を WebStorm から実行しましたが、今回は WebStorm でなく gulp から実行してみます。
(柔軟性を考えると、こちらの方が良いかも。)

前提環境

OS:Mac OS X 10.9.5
Bable:5.4.7
gulp:3.8.11
gulp-babel:5.1.0
npm:2.7.5

手順

gulpgulp-babel をインストール

適当なプロジェクト用ディレクトリを作り、

$ mkdir work

次のコマンドで、このプロジェクトのルート直下に package.json を作成します。(対話インタフェースで色々聞かれますが適当に。)

$ cd work
$ npm init

私の場合は次のように作成されました。

スクリーンショット 2015-05-22 18.03.48.png

package.json が作成されたら、このプロジェクト配下(グローバルでなく)に gulpgulp-babel をインストールします。

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

すると node_modules ディレクトリに gulpgulp-babel がインストールされ、package.json は次のようになりました。

スクリーンショット 2015-05-22 18.06.54.png

package.json の作成は必須ではないのですが、後で本環境を $ npm install で再現できるようになるので、作成することをオススメします。また通常、node_modules ディレクトリは Git の管理から外します(package.json から再現できるものなので)。

② gulp のタスクを作成

このプロジェクトのルート直下に gulp 用の設定ファイル gulpfile.js を新規に作成し、

スクリーンショット 2015-05-22 18.09.21.png

次のように記載します。

gulpfile.js
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task('babel', function() {
  gulp.src('./*.es6')
    .pipe(babel())
    .pipe(gulp.dest('./'))
});

gulp.task('watch', function() {
  gulp.watch('./*.es6', ['babel'])
});

gulp.task('default', ['babel', 'watch']);

このプロジェクトのルート直下の .es6 ファイルを Babel で変換する、という内容です。gulp.watch で、ファイルの変更を監視しています。

変換してみる

適当に ES6 の記法でスクリプトを書き、

スクリーンショット 2015-05-22 18.11.46.png

gulp を実行すると、

$ cd work
$ gulp

次のように変換されます。

スクリーンショット 2015-05-22 18.12.56.png

gulp のタスクによりファイルの変更が監視されているので、スクリプトを保存する度に自動的に変換されます。

動作確認

ブラウザで動作確認してもいいのですが、console.log 程度なら次のようにコマンドでも確認できます。

スクリーンショット 2015-05-22 16.18.05.png

ほか

gulp でソースマップも出力する方法は Babelの公式ページ に書いてあります。

あと gulp 自体の使い方は ドットインストール の gulp入門 あたりが分かり易かったです。
(今回はいろいろ省きましたが、ちゃんとやれば gulp でもっと色々できそう。)

hkusu
Software Engineer @ Yumemi, Inc JavaScript / Android / Kotlin / AWS etc..
http://hkusu.github.io
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした