キリウ君が読まないノート 作 ▸
Gulpで変更監視してWebpackでバンドルする
- すでにGulpでLessをコンパイルしてるところに別件でWebpackを追加したけど
- べつにCSSはバンドルしてくれなくていいし
- 監視はGulpとWebpackどっちかに寄せたいけど、バンドラの仕事じゃない気がするからGulpに寄せたい
みたいな状況になったので
Node.js v12.13.0gulp 4.0.2webpack 4.41.2
必要なものインストール
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 での設定に従います。
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
}
};gulpfile.js
src 以下の変更を監視してWebpackを実行するようにします。
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 以下のファイルをいじると、自動で再バンドルされます。