hugo pipes parcel

新しいダイナミック Hugo スターター - 小包を使用した Hugo Pipes セットアップ。

このリポジトリはアセット パイプラインのデモンストレーションのみを目的としており、完全なスターターとはみなされないことに注意してください。自由に使ってください。ただし、ここにあるものはすべて社内ワークフロー向けに設計されていることに留意してください。

私たちはすべてのプロジェクトで変更ログを使用します。更新については、そのファイルを参照してください。

ツール

• Hugo - 静的 Web ページを生成する、Go で書かれた汎用 Web サイト フレームワーク。
• Parcel - 「超」高速な、構成不要の Web アプリケーション バンドラー。
• ポストCSS | TailwindsCSS (JS ベースの CSS クラスのライブラリ) | PurgeCSS (未使用の CSS を削除)
• KyleAMathews/typefaces (ちょっとしたrequireで OS フォントをローカルにロード)

Hugo アセット パイプライン

このセットアップでは、JavaScript とオープン ソース フォントの処理に Parcel、CSS 処理に Hugo Pipes + PostCSS、および Parcel と Hugo を並行して実行するnpm-run-all利用します (以下の注を参照)。ここでは Yarn パッケージ マネージャーを使用しますが、必要に応じて NPM を使用することもできます。

このアセット パイプラインは、Webpack の使用から JS/フォント/CSS の処理への移行です。 Parcel は Webpack のようなバンドラーですが、柔軟性が若干劣る代わりに、構成とファイルのフットプリントが小さくなり、ビルドが高速になります。実際、Parcel 構成ファイルはありません。 Hugo を使用した CSS 構築への移行により、外部構築プロセスの外で Hugo サイトを開発できるようになります。このアプローチには、以下に概説するような欠点があります。

注:

• この構成は、JS/フォントが運用環境ではなく開発環境で処理されるという前提に基づいて構築されていますが、そのために必要な労力は最小限です。
• package.json内のスクリプトには、一部のシステム (Windows ではない) ではオプションであり、安全に削除できるcross-envを使用した環境変数のロードが含まれています。 cross-env NODE_ENV=developmentをNODE_ENV=developmentに置き換えるだけです。

JS

• パーセルバンドラーを使用します。
• パーセルはassets/output/index.jsに出力されます。
• Hugo は、サブリソースの整合性のためのフィンガープリントと安全なハッシュの作成に使用されます。
  • fileExists "./assets/output/index.jsの場合、Hugo はlayouts/_head/scripts.htmlからそのファイルのハッシュを作成します。
• Hugo は、処理された JS ファイルをpublic/output/index.min.[hash].jsに出力します。

CSS

• PostCSSを活用したHugo Pipesを使用します。注: ユーティリティ クラスの CSS を使用するため、このメソッドを使用します。それ以外の場合は、Parcel を使用して CSS を処理することをお勧めします。以下の「JS ベースの PostCSS の実行に切り替える方法」を参照してください。
• デフォルトとして Parcel/PostCSS を使用します。以下の「Hugo ベースの PostCSS に切り替える方法」を参照してください。

Hugo経由のCSS

• Hugo は、Imports、TailwindCSS、Autoprefixer、および PurgeCSS を利用して、 assets/css/styles.cssをassets/postcss.config.jsで処理します。
• ビルド コマンドにNODE_ENV=developmentが存在する場合、PostCSS は PurgeCSS を通じてファイルを処理しません。
• Hugo は、処理された CSS ファイルをpublic/css/styles.min.[hash].cssに出力します。

パーセル経由の CSS

• Parcel は、Imports、TailwindCSS、Autoprefixer、および PurgeCSS を利用して、 assets/css/styles.cssをassets/postcss.config.jsで処理します。
• ビルド コマンドにNODE_ENV=developmentが存在する場合、PostCSS は PurgeCSS を通じてファイルを処理しません。
• Hugo は、処理された CSS ファイルをassets/output/index.[hash].cssに出力します。

フォント

• Typefaces 経由のオープンソース フォントは Parcel Bundler を使用します。
• Parcel は CSS をassets/output/index.cssに出力し、ハッシュされたフォント ファイルも同じディレクトリに置きます。
• Hugo Pipes はファイルをパブリック ディレクトリに処理し、プリフェッチ リンクを作成します。
  • fileExists "./assets/output/index.css Hugo は、 layouts/_head/stylesheets.htmlからプリフェッチ リンクを作成します。
• Hugo は、処理されたフォントと CSS ファイルをpublic/output/index.min.[hash].cssおよびpublic/output/font-name.[hash].woff[2]に出力します。

画像

• S3 バケットまたはリポジトリのローカルに保存されたアセットは、Imgix 経由で変換されます。

TODO

• キャッシュとプリロードのために _header 内のリソースを考慮します (Scratch は実行可能です)。
• package.json コマンドが適切に設定されていることを確認してください。
• タイポグラフィ パッケージで呼び出されないフォント (商用フォントなど) を管理するためのワークフローを決定します。

Hugo を使用して PostCSS を処理することの長所と短所

長所

• CSSを変更するためにJSを実行する必要がないため、CSS構築時のタイミングの不一致が解消されます。
• 開発中のアップデートはより速く行われます。

短所

• Hugo を実行するためだけに Node モジュールをインストールする必要があります。
• サーバー上で本番環境を構築するには、PostCSS (Node モジュールを使用) を実行する必要があり、すべての変更に合わせて CSS を構築します。
• フォント用に生成された CSS ファイルとは別に、メイン スタイル用の別の CSS ファイルを作成します。

Hugo ベースの PostCSS の実行に切り替える方法

• メインの CSS ファイルをassets/index.jsに削除します。
• Tailwind インポートを変更して、直接ではなく @import 経由で tailwind を呼び出すようにします。
• Hugo を使用するように初期 CSS ファイルlayouts/_head/stylesheets.html変更します (ファイル内のコメントを参照)。