Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やりたいこと

シングルページ(ペライチ)の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にアクセスすると

parcel_demo.gif

6. Prettierの設定

Prettierは

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

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

まとめ

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

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も対応してないようだったのでボツに。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした