Sass
Autoprefixer
pug
prettier
parcel

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


やりたいこと

シングルページ(ペライチ)の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も対応してないようだったのでボツに。