もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

GulpのタスクでBabelで書かれたJSをES5形式に変換してみた

先日、こちらの勉強会に行って初めてBabelに触りました。ここ1年Androidばっかやってたからフロント界隈の進化に置いて行かれている感が。。。

nodejs.connpass.com

実際に今の開発で使うならどうするかなーというあたりで、とりあえずgruntとかgulpを使って今あるブラウザでも解釈できる形に変換してみます。今回はgulpやったことなかったので、gulp調べつつタスク書いてみる。

作ってみた

js_neta/observer_pattern at master · rei-m/js_neta · GitHub

ちょうど手持ちの小さいJSのファイルがあったので、Babel形式に少し書き換えた上でgulpのタスクを組み込んでみます。

準備

Node.jsの環境はあることが大前提なので、ない方はnodebrewでググってNode.jsを端末に入れてください。以下のnpmをグローバルにインストール。

npm install gulp -g
npm install babel -g

package.jsonを作成

Node触ってる方にはおなじみのpackage.jsonを作って依存関係にあるモジュールを定義します。

npm init

で、対話が始まるのでぽちぽち入れていってpackage.jsonを作成します。作ったら必要なモジュールをpackage.jsonに追加してきます。

npm install gulp --save-dev
npm install gulp-babel --save-dev
npm install gulp-plumber --save-dev
npm install gulp-uglify --save-dev

npm install時に --save-devつけるとpackage.jsonに自動に追加してくれます。役割はこんな感じ

gulp gulpの本体
gulp-babel babelをES5に変換する
gulp-plumber タスクでエラーが起きても停止させないためのモジュール
gulp-uglify JSのminify用

gulpfile.jsの作成

Gruntでもありますがタスクを定義します。今回はこんな感じで。

var gulp = require("gulp"),
    babel = require("gulp-babel"),
    uglify = require("gulp-uglify"),
    plumber = require('gulp-plumber');

/*
gulp.task(“タスク名”,function() {});でタスクの登録
gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定
pipe(行いたい処理)でsrcで取得したファイルに処理
gulp.dest(“出力先”)で出力先に処理を施したファイルを出力
*/

gulp.task("js", function() {
    gulp.src("js/es6/**/*.js")
        .pipe(plumber())          // 監視中のエラーによる強制停止を回避
        .pipe(babel())            // ES6をES5準拠に変換
        .pipe(uglify())           // minify
        .pipe(gulp.dest("./js")); //出力
});

gulp.task("default", function(){
    gulp.watch("js/es6/**/*.js", ["js"]);
});

なんかGruntよりだいぶ簡潔に書ける印象。今回はjsというタスクとdefaultのタスクを定義しています。jsタスクはjs/es6以下にあるjsファイルをes6形式からes5形式に変換しminifyをしてjs/に出力するタスクです。defaultの方はファイル監視のタスクでjs/es6以下のjsファイルが変更されたら自動でjsタスクを走らせるタスクです。プロセスが常時起動していて監視しているわけですね。

タスクを走らせたいときは以下のコマンドで動きます。

gulp [タスク名]

または

gulp

タスク名を指定しないとdefaultのタスクが走ります。gulp js を打ってタスクが問題なく動くのを確認したらdefaultのgulpを実行して監視を開始します。これでjs/es6配下のBabel形式で書かれたファイルを編集したらjs/配下にES5形式に変換したファイルを自動で吐き出してくれるようになりました。もちろんhtmlから読み込んでいるのはES5形式のJSです。

Babelで書き換える前のファイルがこちら
https://github.com/rei-m/js_neta/blob/master/observer_pattern/js/org/index.js

書き換えたあとのファイルがこちら
https://github.com/rei-m/js_neta/blob/master/observer_pattern/js/es6/index.js

変換してminifyされたのがこちら
https://github.com/rei-m/js_neta/blob/master/observer_pattern/js/index.js

minifyしてないのを確認したいのであればタスクから外すか以下のコマンドで手動で変換できます。

babel [変換対象のファイル] -o [変換後のファイル名]

次はモジュールを分割する形でタスクを作ってみます。