More than 5 years have passed since last update.

pug+sassをparcelを使って爆速で始める

Posted at 2018-07-27

はじめに

それなりにモダンなWeb開発をするならpugとsassは必須かなぁと思っていたのですが、環境を整えるのがすごくめんどくさそうなんで触らずにいました。
しかし、parcelを使えば簡単なんじゃね？って思い環境を整えたらものすごく簡単で爆速で環境構築できたので書き残しておこうと思います。

ちなみに、parcel自体は昨年末にこの記事を見て少し触った程度です。

手順

parcelをグローバルでインストールする
```
npm i -g parcel-bundler
```
プロジェクトフォルダーを作り、以下のようなファイル構成にする
```
project
├── index.pug
└── style.sass
```

index.pugとstyle.sassを編集する

index.pug

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        link(rel="stylesheet", href="style.sass")
        title Document
    body
        div hello!

style.sass

body
    font-family: sans-serif

vscodeならpug上でもemmetが効くので!を入力しtabを押せば簡単に入力できます。

以下のコマンドを実行
```
parcel index.pug
```

以上でインストールから開発用サーバーの立ち上げまで全てやってくれます！！😊

ビルドする際は以下のコマンドを実行します。

parcel build

終わりに

はっきり言って想像を上回る簡単さで驚きました。
簡単な静的Webページならparcelでサクッと構築するのがいいかもしれません。

どうやら、以下の記事によるとVueも爆速で構築できるみたいなんで使ってみたいですね🤔

Parcelでvue.jsを使うときに、いつのまにかプラグインが不要になっていた件 - Qiita

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up