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

Current version: 10.1

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 フォルダーのみが含まれています。

Do you have some feedback for us?

If you have suggestions for improving this article,