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

Babelの使い方② - Babel + Gulp

More than 3 years have passed since last update.

前回に引き続き、ES6のビルド環境構築です。
今回はBabelとタスクランナーのGulpを組み合わせた場合のビルド環境を作ります。

Babel + GulpのES6ビルド環境の構築

Babel built-systems -> Gulp

前提として、node.jsとbabelとgulpがグローバルインストールされている状態を想定

gulpコマンドが見つからない的なメッセージが出た場合は、gulpをグローバルインストールして下さい
$ sudo npm install -g gulp

  • 適当なディレクトリを用意
$ mkdir babel_test/cap2
$ cd babel_test/cap2
  • package.jsonを作成 $ npm initで対話的に下記のようなファイルを作成しました↓
package.json
{
  "name": "babel-test-gulp",
  "version": "1.0.0",
  "description": "hoge",
  "repository": "piyo",
  "main": "index.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ミスって、descriptionとかrepositoryが空になっちゃってもsudo vi package.jsonで編集出来ます。
(自分の環境だとread-onlyなpackage.jsonが生成されました)

  • Babelのコマンドラインツールをインストール
 $ npm install --save-dev babel-cli
  • es2015のトランスパイル用プラグインをインストール
$ npm install --save-dev babel-preset-es2015
  • .babelrcを作成
 $ touch .babelrc
 $ echo '{ "presets": ["es2015"] }' > .babelrc
  • gulp関係のプラグインをインストール
$ npm install --save-dev gulp
$ npm install --save-dev gulp-babel
$ npm install --save-dev gulp-rename
  • gulpfile.jsを作成(gulpのタスクを作成)
gulpfile.js
 var gulp  = require("gulp");
 var babel = require("gulp-babel");
 var rename = require("gulp-rename");

 gulp.task("babel_build", function () {
     return gulp.src("src/*es6.js")
         .pipe(babel())
         // ".es6"という文字列を削る
         // path.basename -> sample.es6
         .pipe(rename(function (path) {
             var cutLength = path.basename.length - 4;
             path.basename = path.basename.slice(0, cutLength);
         }))
         .pipe(gulp.dest("dist"));
 });

 gulp.task('babel_watch', function() {
     gulp.watch('src/*es6.js', ['babel_build'])
 });

 // defaltタスクを作成しても良い(gulpだけで実行出来る)
 // gulp.task('default', ['babel_build', 'babel_watch']);

gulp-renameはコンパイル後のファイル名から.es6を削るために利用しているため、GulpでBabelを動かすために、必須ではありません。

  • コンパイル元のファイルを作成 デフォルトパラメータとアローファンクションを利用。
src/sample.es6.js
 setTimeout((hoge = "ほげ") => {
        console.log(hoge);
 }, 500);
  • ウォッチ・コンパイルする
 $ pwd # -> ~/babel_test/cap2
 $ gulp babel_watch

スクリーンショット 2016-05-18 19.59.09.png
(背景がスケスケなのはお気になさらず)

備考

gulpfile.jsをES6で記述するためには下記の対策が必要

  • gulpfile.js -> gulpfile.babel.jsに名称変更
  • presetsの設定をgulpfile.babel.jsに記述せず、.babelrc or package.jsonに記述する (import構文などでコケます)

参考記事

Babel built-systems -> Gulp
gulpでよく使うパッケージのメモ
ES6 で書く環境を作る(gulp + Babel 編)(ほぼ、そのままですみません..)

satotaka
普段はRails x Reactを使っています。 alexaでスマートホーム化することにはまっています。
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