Viteで、Webサイト開発のビルド環境を、よりシンプルに

以前では

Webサイトの開発において、一年ぐらい前のプロジェクトでは、GulpとWebpackを使っていました。

• コード変更をウォッチしてdistフォルダにビルド出力 gulp watch()

• エントリーポイント毎に、index.jsなどへバンドル webpack entry, output

• 開発用のlocalhostサーバーの立ち上げ npx webpack serve

• Tailwind CSSのウォッチとビルド node.js scripts

• 分割して書いたHTMLを読み込んで、HTMLを結合 gulp-file-include

• 分割したJavascriptを読み込んで、結合 gulp-concat

package.jsonと、gulpfile.js, webpack.config.js, tailwind.config.js

最近では

Viteで、HTML、Vue、VitePressサイトを作っています。

• vite dev

  • コード変更をウォッチしてdistフォルダにビルド出力
  • 開発用のlocalhostサーバーの立ち上げ
  • Tailwind CSSのウォッチとビルド

• エントリーポイント毎に、index.jsなどへバンドル vite build, rollupOptions inputs

• 分割して書いたHTMLを読み込んで、HTMLを結合 vite-plugin-html-injectプラグイン

• 分割したJavascriptを読み込んで、結合 import文

package.jsonと、vite.config.js, postcss.config.js/tailwind.config.js

メリット

ViteというTool一本に集約でき、設定を書く量も少し減らせることとなりました。

また、コード変更時のホットロード＆プレビュー更新も速くなりました。

Gulpのプラグイン導入と設定コードを書くことに比べれば、学習コストは少なくなります。

Web開発環境の移り変わりは速いもの...ですが。