viteで静的サイトの環境構築してみた

はじめに

ずっとgulp使ってきたけど、最近の主流はviteらしいので環境構築を試してみた。

viteってなんだ

2020年にリリースされたフロントエンドのビルドツール。
読み方は「ヴィート」。

ビルドツールはwebpackもgulpもあるけど、ここ最近ではviteが人気みたい。

環境構築

今回はviteで静的なHTMLとCSS（SCSS）の環境構築をしてみる。

（nodeとnpmはインストール済み）

新規プロジェクトを作成する

今回は「test」というプロジェクト名でVanilla+JSで作成

npm create vite@latest
✔ Project name: … test
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

cd test
npm install
npm run dev

> test@0.0.0 dev
> vite

VITE v5.0.8  ready in 106 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

これで初期の状態（HTMLとCSS）は完了。

configファイルをつくる

viteで色々するためのvite.config.jsをドキュメントルートに作成。

touch vite.config.js

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  //ここに設定を追加
 })

ルート設定

これで「src」をルートにできる。

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
    root: "src"
})

※いまルートにあるhtmlたちはsrcディレクトリへ移動

ビルド設定

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
    root: "src",
    build: {
        outDir:"../dist",
        emptyOutDir: true,
    }
})

その他の機能

ビルド

distディレクトリが生成される。

npm run build

プレビュー

distディレクトリをプレビューしてくれる。

npm run preview

SCSSを導入する

npm i -D sass

main.jsのstyle.css読み込みをscssに変える。

import "./style.scss";　←ここ
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'

おわり

一旦、初期導入まで。
これからSCSSとejs(pugかも)とか入れていく。