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

12818 ワード
pug Autoprefixer prettier Sass parcel Sass テキストリンク

やりたいこと

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

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

前提条件とか

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

Parcelとは

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

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

前提環境

OS: Mac OSX El Capitan

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

Node.jsやYarn（npmでも可)がない場合はインストールしてください。
Macにnode.jsをインストールする手順。 - Qiita（ndenvを使う場合はこちら）
インストール | Yarn

構築手順

1. プロジェクトの作成

$ mkdir ~/work/peraichi-sample
$ cd $_
$ touch index.js
$ touch index.pug
$ touch style.scss
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!
style.scss
body {
  background-color: cyan;
}

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

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

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

2. Parcelのインストール

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

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

3. Sassのコンパイル準備

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

$ yarn add -D node-sass

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

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

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

4. Pugのコンパイル準備

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

$ 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にコンパイルしてもらうことに。（解決済み、追記部分を参照してください）

$ yarn add -D pug-cli

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

package.json
{
  ...

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

追記 2018.06.04

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

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

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

package.json
{
  ...

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

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

$ 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のときと同じく必要なモジュールをインストール

$ yarn add -D postcss-modules autoprefixer

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

.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を実行

$ 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にアクセスすると

6. Prettierの設定

Prettierは

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

まとめ

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

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

参考にさせてもらったサイト

独自設定ファイルは不要。ParcelでコンパイルするSassとAutoprefixer - Qiita
最近話題のParcelをさわってみる - Qiita
Parcel (parcel-bundler) はまだ Webpack の代わりにならない | パークのソフトウエア開発者ブログ｜ICT技術（Java・Android・iPhone・C・Ruby）なら株式会社パークにお任せください
Pug（Jade）って何だ？特徴や基本的な使い方の解説

おまけ

気になる点とか

pug-cliで出力されたindex.htmlが1行になってしまっている

さすがに見栄えが悪いので、納品する時はコードフォーマッターにかけておきたい
Prettierで自動化しようかしたら、SyntaxErrorに…

最終的なCSSはminifyしたい

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

$ yarn build

他のやり方案

Codepen

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

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

Brackets

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