最近では新しいJavascriptの仕様でコーディングをすることも多いかと思いますが、一部のレガシーブラウザでは、この新しい仕様を解釈できずにエラーとなる場合があります。そんな時に旧式の仕様に変換することでレガシーブラウザでも対応できるように変換することをトランスパイルと呼びます。   このトランスパイルの作業をするために必要となるのが「Babel」と呼ばれるものになります。単体でも使えますが、タスクランナーであるGulpと併用することが便利です。今回はGulpでBabelを使った開発フローについてまとめていきたいと思います。   ちなみに今回はあらかじめGulpがローカルにインストールされている前提となります。ローカルへのGulpの環境構築については「Gulp v3系からGulp v4系への移行と注意点いろいろ」をご参考に  

GulpでBabel導入しトランスパイルする

まずはBabelのモジュールをインストールしていきます。下記コマンドをそのまま実行するとローカルにパッケージがインストールされます。ここでは「gulp-babel」「@babel/core」「@babel/preset-env」の3つのパッケージをインストールします。

$ npm i -D gulp-babel @babel/core @babel/preset-env

  インストールが完了するとpackage.jsonのdevDependenciesに追記されているのが確認できます。 【package.json】※一部抜粋

{
 ........
 "devDependencies": {
  "@babel/core": "^7.9.0",
  "@babel/preset-env": "^7.9.0",
  "gulp": "^4.0.2",
  "gulp-babel": "^8.0.0",
  ........
 }
}

  そして、トランスパイルするタスクをgulpfile.jsに記述していきます。モジュールを読み込んでからタスク用の関数を書いてきます。この処理の中で、babel()の引数にはトランスパイルのターゲットを指定できます。最後に出力先のフォルダを指定します。 【gulpfile.js】

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

gulp.task('babel', () =>
 gulp.src('js/**/*.js')
  .pipe(babel(
   {
    presets: ['@babel/env']
   }
  ))
  .pipe(gulp.dest('dist/js'))
);

  そして、下記のようにタスクを実行すると、Javascriptがトランスパイルされ、記述方法が従来型のものに変換されているのが確認できます。

$ npx gulp babel

// トランスパイル前
const test = () => 'test';

// トランスパイル後
var hoge = function hoge() {
 return 'hoge';
};

  こうすることで、どんどん新しい記法でコーディングすることができ、レガシーブラウザへの対応もバッチリですね。  

ソースコードのマッピングファイルを出力する

Javascriptをトランスパイルした場合、元のソースコードとは異なるファイルになるので、そのままですとデバックが思うようにできません。そんな時のためにマッピングファイルを作成することで、元のソースファイルとコンパイル後のファイルをマッピングすることができます。Gulpにはマッピング用のモジュールが用意されているので、今回はそれを利用します。   まずは下記コマンドにてパッケージをインストールします。ここでは「gulp-sourcemaps」「gulp-concat」の2つのパッケージをインストールしていきます。

$ npm i -D gulp-sourcemaps gulp-concat

  インストールされると同じくpackage.jsonのdevDependenciesに追記されているのが確認できます。 【package.json】※一部抜粋

{
 ........
 "devDependencies": {
  "gulp-concat": "^2.6.1",
  "gulp-sourcemaps": "^2.6.5"
  ........
 }
}

  続けてGulpのタスクに処理を追加していきます。先ほどのトランスパイル用のタスクに追記します。処理の中ではまずsourcemapsの初期化を行います。そして、トランスパイルの処理が行われた後、concat()で複数ファイルの場合は1つにまとめるようにします。そのあとにsourcemapsでマッピングファイルの作成を行います。この時にマッピングファイルの出力先を指定できます。 【gulpfile.js】

const gulp = require('gulp');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');

gulp.task('babel', () =>
 gulp.src('js/**/*.js')
  .pipe(sourcemaps.init())
  .pipe(babel(
   {
    presets: ['@babel/env']
   }
  ))
  .pipe(concat('main.js'))
  .pipe(sourcemaps.write('../maps'))
  .pipe(gulp.dest('dist/js'))
);

  タスク登録後、同じくコマンドでタスクを実行するとソースコードのマッピングファイルが指定した場所に出力されているのが確認できます。  

ソースコードのミニファイ化

このようにトランスパイルされたコードは、編集する用ではありませんのでこの時に合わせて圧縮しておくとより軽量化されます。先ほどと同じくGulpに用意されているミニファイ化のモジュールを利用します。下記コマンドで「gulp-uglify」「gulp-rename」の2つのパッケージをインストールします。

$ npm i -D gulp-uglify gulp-rename

  もちろんインストール後にはpackage.jsonにパッケージ名とバージョンが追記されているのが確認できます。 【package.json】※一部抜粋

{
 ........
 "devDependencies": {
  "gulp-rename": "^2.0.0",
  "gulp-uglify": "^3.0.2"
  ........
 }
}

  こちらもタスクの中に処理を書いてきます。順番に気をつけないとエラーが発生するので注意します。トランスパイル終了後に、uglify()でミニファイ化します。そしてそのあとにrename()でミニファイ化されたファイルであることがわかるようにminの表記をファイルに追加します。extnameの値にファイルのあとに続くテキストを指定できます。 【gulpfile.js】

const gulp = require('gulp');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

gulp.task('babel', () =>
 gulp.src('js/**/*.js')
  .pipe(sourcemaps.init())
  .pipe(babel(
   {
    presets: ['@babel/env']
   }
  ))
  .pipe(concat('main.js'))
  .pipe(uglify())
  .pipe(sourcemaps.write('../maps'))
  .pipe(rename(
   {
    extname: '.min.js'
   }
  ))
  .pipe(gulp.dest('dist/js'))
);

  これでタスクを実行してみると、ミニファイ化されたファイルが出力されていることが確認できます。あとは必要に応じて、Watchタスクとして登録したりするとより便利に使えます。  

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 notify = require('gulp-notify'),
 babel = require('gulp-babel'),
 sourcemaps = require('gulp-sourcemaps'),
 concat = require('gulp-concat'),
 uglify = require('gulp-uglify'),
 rename = require('gulp-rename');

const taskBabel = (done) => {
 src('src/es6/**/*.js')
  .pipe(plumber(
   { errorHandler: notify.onError('Error: <%= error.message %>') }
  ))
  .pipe(sourcemaps.init())
  .pipe(babel(
   { presets: ['@babel/preset-env'] }
  ))
  .pipe(concat('main.js'))
  .pipe(uglify())
  .pipe(rename(
   { extname: '.min.js' }
  ))
  .pipe(sourcemaps.write('../maps'))
  .pipe(dest('dist/assets/js'));
  done();
}

// Watch
const taskWatch = (done) => {
 watch('src/es6/*.js', taskBabel);
 done();
}

exports.default = taskWatch;

 

---

  フロントエンドの開発に欠かせない、GulpとBabelですが組み合わせることで、コーディングの効率化に役立ちます。Gulpを使う際にはぜひ試してみてはいかがでしょうか。   （参考にさせて頂いたサイト） npm gulp-babel