Middleman 4.2.1 + External Pipeline + Parcel 1.12環境を作れた
結構シンプルに作れたと思うので満足してる。
素材
静的サイトジェネレータ再び
Middleman ははるか昔、みんなが話題にする前に触っていたのだけれど、Asset Pipeline なんて許されない、みたいな雰囲気になった v4 からは距離を置いていた。Webpack とか生で触りたくないし。
しかし、いよいよもう一度静的サイトジェネレータを真面目に扱えた方がいいんじゃなかろうかという思うようになって1、食わず嫌いだった Middleman v4 の External Pipeline をとりあえず使えるようになっておいた方がよさそうだよなーあー面倒くさいなーとか考えていたらふとそういえば2017年末に Parcel を試して2「production では厳しいけど、お試しならいんじゃね？」という感触を抱いていたことを思い出したので組み合わせて試してみた。
External Pipeline向けassetsはMiddlemanの管轄外に置くべし
いくつか試したみたところ、以下のように Middleman の source/ ディレクトリとは別に置いた方がよさそうだということが分かった。
- source/ とは別に assets/ を掘る
- images/, stylesheets/, javascripts/ はその中に
- これらの中は一切 Ruby で処理しないので erb は置かない
フライング情報も含めてできあがったディレクトリレイアウトはこんな感じ。
.tmp/dist/
source/
layouts/
assets/
images/
javascripts/
stylesheets/
build/
External Pipelineは外部のコマンドを叩き、結果がどこに生成されるかを指定すること
Middlemanの設定 config.rb としては以下のようになる。
activate :external_pipeline, {
name: :parcel,
command: build? ? 'yarn build' : 'yarn watch',
source: '.tmp/dist'
}
..
configure :build do
activate :asset_hash
end
build? というのは middleman build コマンドが叩かれたか否かを判別しているらしい。
ここで source というのは middleman 標準の source ディレクトリと同じ意味に扱う場所のことで、呼ぶ出す外部コマンドに対しては
ここで言う source の場所に出力するように設定してあげないといけない。
activate :asset_hash は最後に middleman で source -> build 出力時にファイル名にいい具合に hash を付与しつつ HTML からの呼び出しにもそのファイル名を展開する機能を有効にするもの。要するに cache buster です。
Parcelの準備
- parcel は zero config のままで ok
- ただし build 時には HTML からではなく個々の asset の entry point を指定する形（画像は全部でよいと思う）
- –out-dir をさっきの source と一致させる
コマンドライン引数を全部書くと、
yarn parcel --out-dir .tmp/dist \
assets/images/**/* \
assets/javascripts/*.js \
assets/stylesheets/*.scss
みたいな感じ。
glob の **/* がどの環境でも使えるのかは未確認。とりあえず手元の zsh では動いている。こうしておくと JavaScript の component や Sass の partial などは import や @import からしか読み込まれないで済むようになる。
HTML から build させると parcel が自前でファイル名に hash を埋め込んでしまうので middleman から扱いにくくなるのと、そもそも middleman が処理する前の html.erb を parcel が処理できないため、あくまで個々の JavaScript や Sass の依存性解決とトランスパイルに利用するようにしてある。
※ あと、Middleman 標準だと *.css.scss が Sass ファイルの拡張子になるんだけど、Parcel では *.scss が拡張子になるなどの細かい違いはある。他にもありそう。
External Pipelineの考え方自体はすでに自分も昔からやってたものだと気づいた
分かる人にしか分からないが、この External Pipeline の考え方は Rails の Asset Pipeline 環境で precompile 設定を使うのに似ている。
例えば何かで build 済みの外部のライブラリを app/assets/ 以下に置く場合や、自分で Asset Pipeline の外に Babel などの環境を作っておいてその成果物を app/assets/ 以下に生成し、precompile で指定しておいて Asset Pipeline の世界に取り込む、みたいな感じ。
あくまで最終的な成果物を build して serve するのは Middleman であり Rails だが、その前の source は場所さえ分かっていれば出自は知らなくてよい、という扱い方。なんだ、External Pipeline はかつての自分が考えたことをもっと賢くしただけ3だった。
できたリポジトリ
wtnabe/middleman-v4-example-with-ep-and-parcel
に置いた。
package.json に sass が追加されているけど、これは parcel の autoinstall で入ったもので、Sass 使わないなら不要。とは言え Web サイトをこさえる際に JavaScript だけ書ければあとは不要ということはまぁあり得ないので、動作確認を兼ねて入れてある。