プロジェクト構造

Spear にはいくつかのプロジェクト構造のルールがあります。

基本

デフォルトでは、Spear のウィザードは以下の構造を作成します。

├── package.json
├── spear.config.mjs
└── src
    ├── articles
    │   ├── [alias].html
    │   └── index.html
    ├── assets
    │   ├── css
    │   │   └── main.scss
    │   ├── fonts
    │   │   └── OpenSans-Regular.ttf
    │   └── js
    │       └── main.js
    ├── components
    │   └── main-component.spear
    ├── images
    │   └── logo.png
    └── index.html

ルールで決められているファイルやディレクトリは以下のとおりです。

Name	Description
package.json	npm パッケージ設定
spear.config.mjs	spear 設定。インストールガイドはこのファイルについて記載されています。
src	ソースディレクトリ。spear.config.mjs を変更することでこのソースディレクトリを変更することができます。
src/components	コンポーネントのディレクトリです。コンポーネントにこのディレクトリについて記載されています。

これ以外のファイルやディレクトリにはルールはありません。

リソースへの参照方法

Spear は生成されたHTMLをほぼ src ディレクトリと同じように dist ディレクトリに出力します。そのため、参照文字列を意識する必要はありません。

例えば、もし index.html が ./images/logo.png を参照している場合、dist ディレクトリにも images/logo.png があるため生成された index.html は同じパスで生成することができます。

ソースディレクトリ

└── src
    ├── articles
    │   ├── [alias].html
    │   └── index.html
    ├── assets
    │   ├── css
    │   │   └── main.scss
    │   ├── fonts
    │   │   └── OpenSans-Regular.ttf
    │   └── js
    │       └── main.js
    ├── components
    │   └── main-component.spear
    ├── images
    │   └── logo.png
    └── index.html

生成されたディレクトリ

└── dist
    ├── articles
    │   ├── blog-post1.html
    │   ├── blog-post2.html
    │   └── index.html
    ├── assets
    │   ├── css
    │   │   └── main.css
    │   ├── fonts
    │   │   └── OpenSans-Regular.ttf
    │   └── js
    │       └── main.js
    ├── images
    │   └── logo.png
    └── index.html

scss ファイルへの参照

通常、<link> タグで SCSS ファイルのビルド後のファイルを指定するべきです。つまり assets/css/main.css へ参照する。

しかし Spear はビルド中に .scss を .css に変換します。そのため、以下のようにスタイルを指定することができます。

<link rel="stylesheet" href="/assets/css/main.scss">

After building, an above sample will be the bellow:

<link rel="stylesheet" href="/assets/css/main.css">