【Gulp4】BrowserifyとWatchifyでES6リアルタイムプレビュー環境を構築する

先日、Gulpを使ったES6の開発環境について下記の記事で紹介した。

browserifyを使ったリアルタイムプレビュー開発環境において、Gulpのwatchを使うよりも「watchify」を使う方が一般的だそうなので、構築した環境の設定について紹介する。

なお、ベースとなる環境は先程挙げた過去記事を参考にしてほしい。

追加プラグインのインストール

まずは以下のコマンドでwatchifyをインストールする。

npm install --save-dev watchify

gulpfile.js コード全文

gulpfile.jsに以下の設定を書き、ターミナルで「gulp」コマンドを実行するとブラウザが立ち上がる。

以後、srcフォルダ内の拡張子jsファイルを更新するたびに、jsフォルダ内にbundle.jsが出力され、立ち上がったローカルサーバーも自動的にリロードされる。

const gulp = require('gulp');
const browserify = require('browserify');
const plumber = require("gulp-plumber");
const browserSync = require('browser-sync');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const watchify = require('watchify');

//setting : paths
const paths = {
  'jsSrc': './src/*.js',
  'jsDist': './js/',
  'jsMain': './src/main.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();
});

// browserify
function bundle(watching=false) {
  const b = browserify({
    entries: [paths.jsMain],
    transform: ['babelify'],
    debug: true,
    plugin: (watching) ? [watchify] : null
  })
  .on('update', () => {
    bundler();
    console.log('scripts rebuild');
  });

  function bundler() {
    return b.bundle()
      .on('error', (e) => {
        console.log(e.message);
      })
      .pipe(source('bundle.js'))
      .pipe(dest(paths.jsDist));
  }

  return bundler();
}

task('bundle', (done) => {
  bundle(true);
  done();
});

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