• すでにGulpでLessをコンパイルしてるところに別件でWebpackを追加したけど
  • べつにCSSはバンドルしてくれなくていいし
  • 監視はGulpとWebpackどっちかに寄せたいけど、バンドラーの仕事じゃない気がするからGulpに寄せたい

みたいな状況になったので

[ Node.js v12.13.0 / gulp@4.0.2 / webpack@4.41.2 ]

サイトのCSSをLessで書いてたけど、管理用画面のJavaScriptが大きくなってきたから、モジュールに分割してバンドルしたくなったとかですね

必要なものインストール

npm install --save-dev gulp webpack webpack-stream

サンプルのディレクトリ構成

最終的にこうなります

 ...
  ├ src
  │  ├ index.js (エントリーポイント)
  │  └ (その他のモジュール)
  ├ build
  │  └ bundle.js (バンドル済みファイル)
  ├ gulpfile.js (Gulp設定)
  └ webpack.config.js (Webpack設定)

サンプルコード

webpack.config.js

バンドル結果を bundle.js として出力するだけの設定です。

output.path が未設定なので、このまま普通に webpack すると dist 以下に結果が出力されますが、Gulp経由の場合、出力先のフォルダは gulpfile.js での設定に従います。

webpack.config.js
module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
	}
};

gulpfile.js

src 以下の変更を監視してWebpackを実行するようにします。

gulpfile.js
const gulp = require('gulp');
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

// バンドル用タスク
gulp.task('bundle', function() {
	// dest は webpack で言う output.path にしたいところを設定
	return webpackStream(webpackConfig, webpack).pipe(gulp.dest('./build'));
});

// 監視用タスク
gulp.task('watch', function() {
	gulp.watch('./src/*', gulp.series('bundle'));
});

// 実行時、bundleしてから監視開始
gulp.task('default', gulp.series('bundle', 'watch'));

サンプル実行

以下コマンド実行すると、最初にバンドルして build/bundle.js を生成してから監視開始します。

npx gulp

この状態で src 以下のファイルをいじると、自動で再バンドルされます。

参考にさせていただいた記事