LoginSignup
9

More than 5 years have passed since last update.

Babelの使い方② - Babel + Gulp

Last updated at Posted at 2016-05-18

前回に引き続き、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 編)(ほぼ、そのままですみません..)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9