CSS テーマと JavaScript の事前の最適化

Current version: 10.2
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SXA では、組み込みのテーマ ツールを使用して、フロントエンドの開発者のマシンで最適化されたファイルを作成できます。これにより、Sitecore インスタンスの外部で pre-optimized-min ファイルが作成され、アセットをより詳細に制御できます。

フロントエンドの開発時にすべての最適化を行うことができます。この方法では、テーマ ファイルを Git などのリポジトリに保存して、バージョンを追跡することができます。テーマ ファイルはシリアル化されたアイテムとして保存されず、コンテンツはエンコードされないため、テーマ ファイルのマージが容易になります。また、異なる開発者が同じテーマで同時に作業することもできます。

注記

デフォルトでは、設定により事前の最適化の使用が推奨されており、ソースの CSS や JS はアップロードされません。デフォルトの設定を変更するには、config.js ファイル (<Theme>/gulp/config.js) に移動します。

pre-optimized-min ファイルを使用してスタイルとスクリプトをアップロードするには、次の手順に従います。

  1. SXA CLI を使用して新しいテーマを作成します。すべてのスクリプトとスタイルのアセットがローカルのテーマ フォルダーに自動的にダウンロードされます。

  2. npm のインストールを使用して、gulp ウォッチャー タスクを実行します。

  3. スタイルまたはスクリプトを変更すると、pre-optimized-min ファイルが作成され、Sitecore インスタンスに自動的にアップロードされます。

    たとえば、アコーディオン コンポーネントのスタイルを変更して保存すると、ソースが個別にアップロードされるのではなく、pre-optimized-min ファイルを使用してアップロードされるというメッセージが表示されます。

    pre-optimized-min によるアップロードの成功メッセージ。

    コンテンツ エディターでは、テーマの styles フォルダーと scripts フォルダーには、ソースのアセットではなく、pre-optimized-min ファイルのみが含まれています。

    テーマのフォルダーには、pre-optimized-min フォルダーのみが含まれています。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、