gulpfile.js を イマドキ な書き方にリファクタリング

はじめに

昨日投稿した「gulp.js で webpack 4 を呼び出す」で gulp.js で webpack を使う方法をご紹介しましたが、gulpfile.js の書き方が旧バージョンのものでした。

今日は、gulpfile.js を gulp.js 4 の書き方に即した形に変更したので、ご紹介します。

目次
  1. 下準備
  2. gulpfile.js を version 4 の書き方で作成
  3. 動作確認

1. 下準備

昨日の下記内容を参考に、gulp と webpack、JSファイルを用意してください。

  1. gulp、webpack をインストール
  2. エントリポイントとなるJSファイルを作成
  3. webpack.config.js を作成

2. gulpfile.js を version 4 の書き方で作成

書き換えは、gulp.js の公式ドキュメントを参考にして行いました。

Watching Files · gulp.js
https://gulpjs.com/docs/en/getting-started/watching-files
gulpfile.js
const { dest, watch } = require("gulp");

const path = require("path");
const webpack = require("webpack");
const webpackStream = require("webpack-stream");

function buildJs() {
  // webpack.config.js 読込
  const webpackConfigPath = path.resolve(__dirname, "webpack.config.js");
  delete require.cache[webpackConfigPath];
  const webpackConfig = require(webpackConfigPath);

  // webpack 実行
  return webpackStream(webpackConfig, webpack).on("error", function (e) {
      this.emit("end");
    })
    .pipe(dest("./dist"));
}

exports.default = function() {
  watch('./src/**/*.js', buildJs);
};

3. 動作確認

下記コマンドで、JSファイルの監視を開始します。 

$ npx gulp
[21:49:00] Using gulpfile /path/to/gulp-webpack/gulpfile.js
[21:49:00] Starting 'default'...

上記のように Starting 'default' と表示されたら、 src 内にあるJSファイルのどれか１つを開き、変更を加えずにそのまま上書き保存してください。すると下記のように webpack が実行されます。 

[21:49:02] Starting 'buildJs'...
[21:49:03] Version: webpack 4.39.3
Built at: 2019-08-30 9:49:03 PM
          Asset       Size  Chunks             Chunk Names
./sub/test-1.js  945 bytes       0  [emitted]  ./sub/test-1.js
    ./test-2.js  946 bytes       1  [emitted]  ./test-2.js
    ./test-3.js  947 bytes       2  [emitted]  ./test-3.js
Entrypoint ./sub/test-1.js = ./sub/test-1.js
Entrypoint ./test-2.js = ./test-2.js
Entrypoint ./test-3.js = ./test-3.js
[21:49:03] Finished 'buildJs' after 808 ms

dist ディレクトリにコンパイルされたJSファイルが作成されていれば完了です。