Gulp+Babelを使ってES6で書いたJSをコンパイルする

最近オブジェクト指向のプログラミングをすることがあり、初めてES6記法をゴリゴリ使ってJSを書くことがあったのだが、ES6記法そのままではIE11など対応していないブラウザも多いためコンパイルする必要がある。

今回はGulp4とGulpプラグイン「gulp-babel」を使って、オートコンパイル環境を構築したのでその手順をまとめておく。

パッケージのインストール

まずは必要なパッケージをインストールする。

npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulpfile.jsにタスクを登録する

まずはgulp-babelに関する部分について確認していこう。

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

// パス情報
const paths = {
  'root': './',
  'jsSrc': './src/*.js',
  'jsDist': './js/'
}

// タスクの定義
task('babel', () => {
  return (
    src(paths.jsSrc)
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(dest(paths.jsDist))
  );
});

オートコンパイルの設定

Gulpによるコンパイルを単発で行うことは少ないだろう。
開発においてはオートコンパイルが前提となることが多いはずだ。

開発サーバーの起動・オートコンパイル・ブラウザ自動リロードをまとめてタスク化したコードも紹介しておく。

const gulp = require('gulp');
const plumber = require("gulp-plumber");
const browserSync = require('browser-sync');
const babel = require('gulp-babel');

//setting : paths
const paths = {
  'root': './',
  'jsSrc': './src/*.js',
  'jsDist': './js/'
}

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

// browser-sync
task('browser-sync', () => {
  return browserSync.init({
    server: {
      baseDir: paths.root
    },
    port: 8080,
    reloadOnRestart: true
  });
});

// browser-sync reload
task('reload', (done) => {
  browserSync.reload();
  done();
});

task('babel', () => {
  return (
    src(paths.jsSrc)
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(dest(paths.jsDist))
  );
});

//watch
task('watch', (done) => {
  watch([paths.jsSrc], series('babel', 'reload'));
  done();
});
task('default', parallel('watch', 'browser-sync'));

ターミナルでgulpコマンドを叩けばサーバーが立ち上がり、以降ES6のコードは自動でコンパイルされ、同時にブラウザもオートリロードされるはずだ。