Parcelで快適なペライチ制作環境を作ってみた

# やりたいこと
シングルページ（ペライチ）のWebサイト制作を効率的にできる開発環境がほしい。

- PugとSassを使ってコード量を少なくしたい
- ブラウザ上でリアルタイムにプレビュー表示したい
- Prettierなどのコードフォーマッターを使いたい
- Autoprefixerでベンダープレフィックスを付与したい

# 前提条件とか

- 最終的にHTMLファイルとCSSファイルとして納入
- 納入先での修正は基本的にしない
- ソースコードは公開しない

# Parcelとは
設定ファイルがいらないお手軽モジュールバンドラー。
今回はPugやSassのコンパイル、Autoprefixerの適用のために使用する。
ついでにブラウザの自動リロードもしてくれる。

Webpack4から設定ファイル無しが選べるようになったが、ペライチ制作くらいシンプルな用途ならParcelの方が手軽そうなので、今回はParcelを試してみた。

# 前提環境
OS: Mac OSX El Capitan

```bash
$ node -v
v8.9.4
$ yarn -v
1.3.2
```

Node.jsやYarn（npmでも可)がない場合はインストールしてください。
[Macにnode.jsをインストールする手順。 - Qiita](https://qiita.com/akakuro43/items/600e7e4695588ab2958d)（ndenvを使う場合は[こちら](https://qiita.com/noraworld/items/462689e108c10102d51f)）
[インストール | Yarn](https://yarnpkg.com/lang/ja/docs/install/#mac-stable)

# 構築手順
## 1. プロジェクトの作成

```bash
$ mkdir ~/work/peraichi-sample
$ cd $_
$ touch index.js
$ touch index.pug
$ touch style.scss
```

```pug:index.pug
doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width,initial-scale=1.0')
    title peraichi sample
  body
    p Hello, World!

```

```sass:style.scss
body {
  background-color: cyan;
}

```

最終的なフォルダ構成は以下の通り

```text
peraichi-sample/
　├ dist/
　├ index.js
　├ index.pug
　└ style.scss
```

**distフォルダ**
Parcel実行後に勝手に作られます。コンパイル後のファイルが置かれる場所。

## 2. Parcelのインストール

```bash
# 初期化（インタラクティブ版は $ yarn init）
$ yarn

# -D(--dev)オプション： 開発環境にのみインストール＆記録
$ yarn add -D parcel-bundler
```

## 3. Sassのコンパイル準備

まず、コンパイルに必要なモジュールをインストール

```bash
$ yarn add -D node-sass
```

Parcelでは、CSSはJavascript経由で読み込むので、以下のとおり修正

```javascript:index.js
import "./style.scss";

```

```pug:index.pug
doctype html
html
  ...
  body
    p Hello, World!
    //- CSSを読み込むためのJavascriptファイル
    script(src='index.js')

```

これだけで後はParcelがコンパイルをやってくれる。

## 4. Pugのコンパイル準備
Pugのコンパイルは本来は以下のようにやるのですが、私の環境ではエラーになって動かず。

```bash
$ yarn add -D parcel-plugin-pug
$ yarn run parcel index.pug
yarn run v1.3.2
...
Server running at http://localhost:1234
🚨  /Users/shoezawa/work/study/peraichi-sample/index.pug: Cannot resolve dependency './../../../../../3e38de41f84b50149c6b867d345f4a57.js' at '/3e38de41f84b50149c6b867d345f4a57.js'
    at Resolver.resolve (/Users/shoezawa/work/study/peraichi-sample/node_modules/parcel-bundler/src/Resolver.js:70:17)
    at <anonymous>
```

なので、今回は`pub-cli`にコンパイルしてもらうことに。（解決済み、追記部分を参照してください）

```bash
$ yarn add -D pug-cli
```

npm script を使って、Pugのコンパイル→Parcel実行するようにします。

```json:package.json
{
  ...

  "scripts": {
    "start": "pug index.pug --watch & parcel index.html"
  }
}
```

### 追記 2018.06.04
上記のエラーは`parcel-plugin-pug`のバグのようで、`pug`だけインストールしてやり直したら行けました！

```bash
$ yarn remove parcel-plugin-pug pug-cli
$ yarn add -D pug
```

次に`package.json`を書き換えて、ParcelにPugのコンパイルを任せます。

```json:package.json
{
  ...

  "scripts": {
    "start": "parcel index.pug"
  }
}
```

これで無事実行できました！

```bash
$ yarn start
yarn run v1.3.2
warning package.json: No license field
$ parcel index.pug
Server running at http://localhost:1234
✨  Built in 15ms.
```

@sKawashima さん、情報ありがとうございました！


## Autoprefixerの準備

Sassのときと同じく必要なモジュールをインストール

```bash
$ yarn add -D postcss-modules autoprefixer
```

PostCSS用の設定ファイルを以下のように作る

```text:.postcssrc
{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true,
      "browsers": [
        "last 2 versions"
      ]
    }
  }
}
```

これで、Parcel実行時にベンダープレフィックス付で出力してくれます。

```dist/app.XXXXX.css
body {
  background-color: cyan;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

```

## 5. Parcelの実行

これで準備がすべて整ったので、いよいよParcelを実行

```bash
$ yarn start
yarn run v1.3.2
warning package.json: No license field
$ pug index.pug --watch & parcel index.html

  watching index.pug
Server running at http://localhost:1234
⏳  Building...
✨  Built in 4.66s.
```

これで`http://localhost:1234`にアクセスすると

![parcel_demo.gif](https://qiita-image-store.s3.amazonaws.com/0/114828/55471438-988f-1ba0-1755-c59086d800f1.gif)

## 6. Prettierの設定
Prettierは

1. Atomエディタの`prettier-atom`プラグインを入れて
2. [Setting] - [format on save]にチェックを入れるだけ

https://atom.io/packages/prettier-atom

# まとめ
ペライチを作るだけなのに、結構大変な構築手順だった気もしますが、一度作れば使いまわせますし、開発環境構築の勉強にもなるのでいいかなと思います。

Pugのコンパイルがうまく行かなったのが残念でしたが、それでも割りと簡単に構築できたかなと思います。

# 参考にさせてもらったサイト
[独自設定ファイルは不要。ParcelでコンパイルするSassとAutoprefixer - Qiita](https://qiita.com/tonkotsuboy_com/items/2f96263294fad7661a82)
[最近話題のParcelをさわってみる - Qiita](https://qiita.com/YukiHayakawa/items/9bef0c8d7f835f5fd223)
[Parcel (parcel-bundler) はまだ Webpack の代わりにならない | パークのソフトウエア開発者ブログ｜ICT技術（Java・Android・iPhone・C・Ruby）なら株式会社パークにお任せください](https://ameblo.jp/softwaredeveloper/entry-12335153164.html)
[Pug（Jade）って何だ？特徴や基本的な使い方の解説](https://kumaweb-d.com/web/basics-of-pug/)

# おまけ
## 気になる点とか
### `pug-cli`で出力された`index.html`が1行になってしまっている
さすがに見栄えが悪いので、納品する時はコードフォーマッターにかけておきたい
Prettierで自動化しようかしたら、SyntaxErrorに…

### 最終的なCSSはminifyしたい

```json:package.json
  "scripts": {
    "start": "pug index.pug --watch & parcel index.html",
    "build": "pug index.pug & parcel build index.html"
  }
```

```bash
$ yarn build
```

## 他のやり方案
### Codepen
最初にあがった案
ペライチなら十分な機能だし、PugやSassも簡単に使えるにできる。

ただし、Pro版じゃないとソースが公開されてしまうのが、クライアントワークとしては気がかりでボツに。

### Brackets
あまり見かけないがライブプレビューを標準装備したWeb特化のエディター。
PugやSassを使う方法がうまく探せず、Prettierも対応してないようだったのでボツに。