ParcelでHTMLやSASSやJSを一括ビルドしたいっ！！
Opened this issue · 5 comments
うまくやればpreloadも全自動で取得できるかもしれない。そしたらあのややこしい手製ローカルプラグインとはサヨナラだ！
PugはParcelで処理するべきではないかもしれない。Pugに渡すメタデータをどうすればいい？
軽く試してみたが、動作がいまいち安定しない。ファイルの参照が常にプロジェクト・ルートになってしまう。npmパッケージの参照もルートからの相対パスでないと機能しない。PostHTMLを使用して擬似的に再現するのが良い案だと考える。
軽く試してみたが、動作がいまいち安定しない。ファイルの参照が常にプロジェクト・ルートになってしまう。npmパッケージの参照もルートからの相対パスでないと機能しない。PostHTMLを使用して擬似的に再現するのが良い案だと考える。
- PostHTMLでHTMLを前処理
- PostHTMLでHTML内に含まれるCSS/JS/外部リソースを探す
- HTML内で検出したCSSは、MetalsmithとPostCSSで処理しファイル生成
- CSS内で見つかった外部リソース（画像、フォント、Modernizr、など）はMetalsmithで処理しファイル生成
- HTML内で検出したJSは、Metalsmithと…何で処理しよう？とにかくファイル生成
- HTML内で検出した外部リソース（画像、ビデオ、SASS、TypeScript、など）はMetalsmithで処理しファイル生成
- HTML内で検出したCSSは、MetalsmithとPostCSSで処理しファイル生成
- HTMLの処理過程で検出したCSSや外部リソースに関するpreload、
<link>要素、<script>要素などを追加、あるいは置換 - 処理済みではないCSS/JS/外部リソースが見つからなくなるまで、2からの手順を繰り返す
- PostHTMLでHTMLを後処理。Modernizrの追加などはこのフェーズでやったほうがいい
こんなとこだろうか。CSSやJSや外部リソースは別のディレクトリ内から読み込めるようにしたほうがいいだろう。必要なファイルだけをメインのMetalsmithパイプラインに追加する。
軽く試してみたが、動作がいまいち安定しない。ファイルの参照が常にプロジェクト・ルートになってしまう。npmパッケージの参照もルートからの相対パスでないと機能しない。PostHTMLを使用して擬似的に再現するのが良い案だと考える。
ソースコードをデバッグしながら動かした感じだと、srcディレクトリ内からnode_modulesを参照するためには/../node_modules/を先頭に追加しないといけないようだ。
/はParcelに渡されたエントリファイル全てに共通する親ディレクトリrootDirを基準にパス解決する~は処理対象のファイルがnode_modules/xxxディレクトリ以下に置かれている場合に、node_modules/xxxディレクトリを基準にパス解決する。つまり、-
src/node_modules/foo/hoge.htmlsrc/node_modules/foo/bar/hoge.html
内で
~module/dist/xxxx.js~/module/dist/xxxx.js
を読み込むと
src/node_modules/foo/module/dist/xxxx.jsになる -
src/subdir/node_modules/foo/hoge.htmlsrc/subdir/node_modules/foo/bar/hoge.html
内で
~module/dist/xxxx.js~/module/dist/xxxx.js
を読み込むと
src/subdir/node_modules/foo/module/dist/xxxx.jsになる
-
package rootってそういうことか…~は使わないほうがいいなこりゃ…