やりたいこと
シングルページ（ペライチ）の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
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!
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経由で読み込むので、以下のとおり修正
import "./style.scss";
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実行するようにします。
{
...
"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のコンパイルを任せます。
{
...
"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用の設定ファイルを以下のように作る
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true,
"browsers": [
"last 2 versions"
]
}
}
}
これで、Parcel実行時にベンダープレフィックス付で出力してくれます。
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は
- Atomエディタの
prettier-atomプラグインを入れて - [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したい
"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も対応してないようだったのでボツに。