Single Page
package.json.scriptsで必要最低限のウェブ制作環境を作る

まえおき

Viteを使った簡単な開発環境を試作したが、より簡単な、必要最低限のものも試作してみる。

言語はPug・Sass (SCSS)・TypeScriptだが、Tailwind CSSは使用不能。

なぜなら必要最低限だからして、PostCSSもAutoprefixerも付けないミニマルスタイルなので。

前提環境は次の通り。

  • Node.jsがグローバルインストールされていること
  • VS Codeが使えること
  • （可能であれば）Apacheなどでローカルサーバが動いていること
  • GitHubアカウントがあり、GitHub Desktopがインストールされていて、それらの両方のログインしていること

ファイルとフォルダ作成

Viteの時に作ったphewをそのまま流用する。

Phew2 をビューワーで開く

プロジェクトフォルダを作る

フォルダ名をphewとして新規作成。

VS Codeを新しいウィンドウで開き、フォルダをドラッグ・アンド・ドロップ。

今回はパブリッシュを行わないのでphew2というフォルダ名で仮作成した。

mkdir src
mkdir src/html
mkdir src/css
mkdir src/js
mkdir src/public
mkdir src/public/img
mkdir dist

npm

npmの初期化。

smooth-scrollbarはサイトデザインとして導入しているだけなので必須ではない。

npm init -y
npm i -D @types/csso @types/fs-extra @types/html-minifier @types/pug csso esbuild fs-extra glob html-minifier pug sass ts-node typescript
npm i dotenv smooth-scrollbar

ファイルの作成・編集

  • .gitignore（新規作成）
  • .env（新規作成）
  • package.json（typeメソッドの追加と、scriptsメソッドの更新）
  • build-html.js（新規作成）
  • build-css.js（新規作成）
  • build-js.js（新規作成）
  • build-public.js（新規作成）
  • build-clear.js（新規作成）

GitHubリポジトリの作成

プロジェクトフォルダをGitHub Desktopのウィンドウにドラッグ・アンド・ドロップしてリポジトリを新規作成する。

「create a repository」「Create repository」「Publish repository]」「Publish repository」と4回クリックすれば制作前の準備は全て完了。

Viteの時と違ってバンドルは行われない。

srcフォルダでの編集内容がそのままdistフォルダに出力される。

ただし.envおよびbuild-html.jsでのビルド用URL切り替えは同様に発生してしまう。

.envの*_GITHUBPAGESと*_XSERVERの値だけを変更する以外は全部使い回すなどしてやりくりしてほしい。

制作

開発モードは存在しない。

srcフォルダの中身を一気に書いていって、ローカルサーバモードでの書き出しを行ってブラウザで確認し、srcフォルダの修正に戻るという方法。

PugをHTML形式で書き出し

npm run html:local

PugをPHP形式で書き出し

npm run php:local

distフォルダ内部に不要なゴミファイルが残って邪魔になった場合に備えて、お掃除スクリプトも用意しておいた。

distフォルダの中身を空にする

npm run clean

開発が終わったら、レンタルサーバ用またはGitHub Pages用への書き出しを行う。

レンタルサーバ版ではdistフォルダをそのままアップロードすれば完了。

レンタルサーバ用にHTML形式で書き出し

npm run html:xserver

レンタルサーバ用にPHP形式で書き出し

npm run php:xserver

GitHub PagesでPHPは動かないのでHTML版しか用意していない。

GitHub Pagesでの設定、カスタムドメインなどについては先行するVite版の【おまけ１】以降を参照のこと。

GitHub Pages用にHTML形式で書き出し

npm run html:githubpages