Gulp から Vite への移行

このサイトのテーマファイルのベースは静的 html で、
かなり前から使っている Gulp を使った環境だったのですが、
今までサボっていた Dart Sass への移行と合わせて Vite に移行しました。

その経緯や設定ファイルなどをまとめましたので参考になれば幸いです。

今までの開発環境

ちなみに Gulp を使ったその環境です。
数年前に導入してからずっと使っている環境です。

ここに表が入ります。

Viteへ移行した経緯

Dart Sass への移行が面倒そうだったので放置していたのですが、
Gulp を使い始めて結構な年月が経ち、バージョンアップもされていなかった（今は 5 になった）のもあり、他のツールがあるか調べて出てきたので Vite でした。

試した結果は好印象

Vite を試した所、デフォルトで CSS のネスト使えてライブリロードもできてかなり便利そうなのと、
導入の敷居も低そうなので、今後のことも考えて移行することにしました。

プラグインなど選んで設定を整える

Vite では CSS を推奨していますが、Sass（SCSS）を使う方法も紹介されています。
ここからプラグインを追加していくことで、今までの環境と同じようにしていきます。

追加したプラグイン

vite-plugin-ejs	ejs
vite-plugin-image-optimizer	画像圧縮
vite-plugin-full-reload	.ejs 更新用
vite-plugin-static-copy	ファイルのコピー ビルドして生成された assets フォルダをWordpressのテーマフォルダへ

設定ファイル

今後変わるかもしれませんが、現在はこんな感じです。
今までと大体同じような感じで制作が進められます。

import { resolve } from "path";
import { defineConfig } from "vite";
import { ViteEjsPlugin } from "vite-plugin-ejs";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
import { viteStaticCopy } from "vite-plugin-static-copy";
import FullReload from "vite-plugin-full-reload";

// ルートディレクトリ
const root = "src";
// WPテーマディレクトリ
const wpTheme = "テーマのディレクトリ名";

export default defineConfig({
  root: root,
  base: "./",
  plugins: [
    // ejs
    ViteEjsPlugin(),

    // 画像の圧縮
    ViteImageOptimizer({
      svg: {
        plugins: [{ removeViewBox: false }],
      },
      png: {
        quality: 80,
      },
      jpeg: {
        quality: 80,
      },
      jpg: {
        quality: 80,
      },
    }),

    // EJSのライブリロード
    FullReload([root + "/_*/**/*.ejs"]),

    // wordpressのテーマ用に静的ファイルをビルド時にコピー
    viteStaticCopy({
      targets: [
        {
          src: "../dist/assets",
          dest: "ローカルにあるワードプレスの場所" + wpTheme,
        },
        {
          src: "../src/public/*",
          dest: "ローカルにあるルートの場所",
        },
      ],
    }),
  ],
  css: {
    // dev時にSourcemapを有効に
    devSourcemap: true,
  },
  // ビルド設定
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        frontpage: resolve(__dirname, root, "index.html"),
        // 下層ページがあれば追加
        // page: resolve(__dirname, "page/index.html"),
      },
      // wordpress用にハッシュ化しない
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: "assets/[name].[ext]",
      },
    },
  },
});

今後試したいこと

• PostCSS を使ってみる
• Tailwind CSS を使ってみる

まとめ

自分用なので、これでいいですね。
しばらく様子を見ます。

仕事用で使う場合には、自社で完結する場合もあれば、

• LP など html で納品
• 他者が更新する時がある

といった場合もあるので、そういう時は納品用の設定を作る必要がありそうです。