search

sounisi5011 / sounisi5011.jp

sounisi5011.jp's root page
0 stars 0 forks source link

ParcelでHTMLやSASSやJSを一括ビルドしたいっ！！ #87

Open sounisi5011 opened 4 years ago

sounisi5011 commented 4 years ago

Parcelを使ったら、PugもPostCSSもBabelもまとめられる上に、PostHTMLの力で編集や変換だって可能になるぞ。ぜひ導入したい！

sounisi5011 commented 4 years ago

うまくやればpreloadも全自動で取得できるかもしれない。そしたらあのややこしい手製ローカルプラグインとはサヨナラだ！

sounisi5011 commented 4 years ago

PugはParcelで処理するべきではないかもしれない。Pugに渡すメタデータをどうすればいい？

sounisi5011 commented 4 years ago

軽く試してみたが、動作がいまいち安定しない。ファイルの参照が常にプロジェクト・ルートになってしまう。npmパッケージの参照もルートからの相対パスでないと機能しない。PostHTMLを使用して擬似的に再現するのが良い案だと考える。

sounisi5011 commented 4 years ago

軽く試してみたが、動作がいまいち安定しない。ファイルの参照が常にプロジェクト・ルートになってしまう。npmパッケージの参照もルートからの相対パスでないと機能しない。PostHTMLを使用して擬似的に再現するのが良い案だと考える。

  1. PostHTMLでHTMLを前処理
  2. PostHTMLでHTML内に含まれるCSS/JS/外部リソースを探す
    1. HTML内で検出したCSSは、MetalsmithとPostCSSで処理しファイル生成
      1. CSS内で見つかった外部リソース（画像、フォント、Modernizr、など）はMetalsmithで処理しファイル生成
    2. HTML内で検出したJSは、Metalsmithと…何で処理しよう？とにかくファイル生成
    3. HTML内で検出した外部リソース（画像、ビデオ、SASS、TypeScript、など）はMetalsmithで処理しファイル生成
  3. HTMLの処理過程で検出したCSSや外部リソースに関するpreload、<link>要素、<script>要素などを追加、あるいは置換
  4. 処理済みではないCSS/JS/外部リソースが見つからなくなるまで、2からの手順を繰り返す
  5. PostHTMLでHTMLを後処理。Modernizrの追加などはこのフェーズでやったほうがいい

こんなとこだろうか。CSSやJSや外部リソースは別のディレクトリ内から読み込めるようにしたほうがいいだろう。必要なファイルだけをメインのMetalsmithパイプラインに追加する。

sounisi5011 commented 4 years ago

軽く試してみたが、動作がいまいち安定しない。ファイルの参照が常にプロジェクト・ルートになってしまう。npmパッケージの参照もルートからの相対パスでないと機能しない。PostHTMLを使用して擬似的に再現するのが良い案だと考える。

ソースコードをデバッグしながら動かした感じだと、srcディレクトリ内からnode_modulesを参照するためには/../node_modules/を先頭に追加しないといけないようだ。

package rootってそういうことか…~は使わないほうがいいなこりゃ…