現状

npm run devするとgulpを通してSpringで実装されたwebアプリケーションがビルドされます。

"gulp": "^4.0.2",

やりたいこと

新しくSPAな画面を追加したいです。そこで、viteとReactを使ってこの部分を設計しています。
現状のリソースまでSPA化する必要はありません。

"vite": "^3.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"

詰まっていること

頭の中ではgulpとviteが共存するような形を考えています。
しかし、具体的に一つのアプリケーションに統合する部分が不鮮明です。
そもそも一つのアプリケーションにて二つのビルドツール(?)が共存するような設計はよろしくないのでしょうか？

試したこと

試しに、package.jsonにて以下のようにスクリプトを定義してnpm run devを実行しました。

  "scripts": {
    "dev": "vite & gulp serve ",
  }

結果的に異なる二つのポート番号にホストされることを確認しました。

行動規範の内容に同意します

回答1件

ベストアンサー

複数のビルドツールを共存させることはできますか？

はい、可能です。
しかしオススメはしません。

Yes or Noで答えられる質問なのでこれで終わりですが、
質問文を見る限り「どう設計すれば良いのかわからん助けてくれ」が本題だと思うので
そういう方向で解説していきます。

vite & gulp serve

これの各々はローカルの開発用サーバを起動させる事が目的です。
いくら開発用のサーバとはいえ、これもちゃんとしたWebサーバです。

Webサーバなのでマシンに用意されているポート番号を要求・専有します。
それによりhttp://localhost:3000/などとブラウザで入力して閲覧することが出来るのですが、
gulp serveでNode.jsのGulpプロセスがマシンのTCP3000番ポートを専有してしまうので、
後から立ち上げたViteプロセスはTCP3000番ポートを使用できなくなってしまいます。

でも質問文を読む限りは両方のWebサーバは稼働出来ているように思えますね。
調査したところ、ViteはデフォルトでTCP5173番を利用するようです。
ならhttp://localhost:5173でアクセスすれば閲覧出来るのではないでしょうか？
参考サイト: サーバオプション - Vite公式

そもそも一つのアプリケーションにて二つのビルドツール(?)が共存するような設計はよろしくないのでしょうか？

時と場合によります。
例えばC言語のコンパイルを行う時の設定ファイルのMakefileは強力なので
Node.jsを始めとする他の言語でもわりと気軽に使用されます。

しかし、GulpとViteのように同じHTML、CSS、JavaScriptファイルをコンパイルするときに混在するというのは滅多にやるものではありません。
新しく参加した人は確実に「なんで混在させてんの？」って思うでしょう。
特にGulpはもう廃れまくってて、ライブラリのバージョンもろくに更新されないでしょうに……

正常動作を確認するテストを行いながら徐々にGulpは消しちゃって
最終的にViteなりなんなりで揃えた方が良いでしょう。

共存のさせかた

とはいえ、いきなり大工事は質問者さんが過労死すると思うので
既存の作りのまま共存させ生き延びる事が重要です。

今はgulp serveを使ってライブリロードするWebサーバを構築するように作っていると思いますが、
この「ライブリロードするWebサーバを立ち上げる」というのは廃止しましょう。
Gulp.watchを使ってファイルを見張って都度コンパイルさせます。

この「ライブリロードするWebサーバを立ち上げる」部分をVite君に全て任せてしまおうってわけですね。
Gulpは各種ファイルをgulp.watchで見張り、変更されたらすぐさまコンパイルを実行してdistディレクトリへ成果物を投げ込みます。
Viteはそのdistディレクトリの成果物を静的アセットとして取り扱う仕組みにすれば行けるんじゃないですかね？

ライブリロードはこんなの見つけました
vite-plugin-live-reload

ただまぁ、私はViteに関してはよくわからないので、もし出来なかったら
逆パターンのGulpのサーバが管理している箇所にViteの成果物を投げ込む作戦を試してみてください。

投稿2022/11/30 06:44