parcelでサクッとペライチページを作る

parcelを使ってサクッとローカルで確認できるペライチページを作ってみたいと思います。

• pugが使える
• sassが使える
• 複雑な設定が必要ない

ということで、実際にparcelを使ってコーディングする手前までの手順メモです。

parcelプロジェクトを作る

適当な場所にプロジェクトのディレクトリを作ります。今回はparcelProjectにします。

$ mkdir parcelProject

package.jsonを作成

$ yarn init -y

parcelをインストール

$ yarn add -D parcel

HTMLを作る

とりあえずページを表示します。parcelProjectの中にsrcディレクトリを作りindex.pugを作成。
parcelではデフォルトでpugファイルが使用できるようになっています。（pugファイルを見つけると自動で必要なプラグインをインストールしてくれる）
普通のhtmlファイルで作成する場合は、.pugのかわりに.htmlファイルを作成すればOK。

parcelProject
 ├── node_modules
 ├── package.json
+├── src
+│   └── index.pug
 └── yarn.lock

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    title ぺらサイト
  body
    h1 はろーわーるど！

出力結果

parcelを起動してページを確認します。今回はindex.pugをエントリーポイントとして指定。
（htmlファイルで作った人は.htmlで起動してください）

$ parcel src/index.pug

うまく起動したらhttp://localhost:1234/へアクセス

CSSを追加

srcディレクトリにindex.sassを作成。

parcelProject
 ├── dist
 ├── node_modules
 ├── package.json
 ├── src
 │   ├── index.pug
+│   └── index.sass
 └── yarn.lock

index.sass

h1
  color: coral

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    title ぺらサイト
+   link(rel="stylesheet" href="./index.sass")
  body
    h1 はろーわーるど！

出力結果

JSを追加

srcディレクトリにindex.jsを作成。

ParcelProject
 ├── dist
 ├── node_modules
 ├── package.json
 ├── src
+│   ├── index.js
 │   ├── index.pug
 │   └── index.sass
 └── yarn.lock

index.js

console.log('hello');

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    title ぺらサイト
    link(rel="stylesheet" href="./index.sass")
  body
    h1 はろーわーるど！
+   script(type="module" src="./index.js")

出力結果

あとは各ファイルを編集していけばOK!
他ページへのリンクを張ったり、ファイル分割ができたりもするので詳しくは公式サイトをチェック！