CSS の最小化
縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。
ほとんどの場合、圧縮は webpack(英語) などのツールを使用してビルドプロセスのステップとして実行されます。ビルドツールを使用していない場合は、CSSO(英語) や cssnano(英語) などのスタンドアロンツールを使用できます。
コードを自動的に縮小するには、縮小ツールをインストールし、ファイルへの変更を追跡して縮小ツールを実行するファイル監視を構成する必要があります。
デフォルトでは、ファイルウォッチャーのスコープ内の CSS ファイルが変更され保存されるとすぐに縮小化が開始されます。ツールを呼び出す他のイベントを指定できます。詳細については、ファイル監視を参照してください。
生成された縮小コードは、ソース CSS ファイルの名前と拡張子 min.css が付いた別のファイルに保存されます。この生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。ただし、プロジェクトツリーでは、ノードとして表示されるソース CSS ファイルに、コードが縮小されたファイルが表示されます。このデフォルトの表示を変更するには、プロジェクトツールウィンドウでファイルのネストを設定します。
以下の例は、CSSO を使用して JetBrains Rider から直接 CSS コードを縮小する方法を示しています。
サンプル: CSSO を使用して CSS を圧縮する
コードを自動的に縮小するには、CSSO をインストールし、ファイルへの変更を追跡してツールを実行する CSSO ファイルウォッチャーを構成する必要があります。
デフォルトでは、ファイル監視のスコープ内の CSS ファイルが変更されて保存されるとすぐに縮小が開始されます。CSSO を呼び出す他のイベントを指定できます。ファイル監視の詳細を参照してください。
生成された縮小コードは、ソース CSS ファイルの名前と拡張子 min.css が付いた別のファイルに保存されます。この生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されています。ただし、プロジェクトツリーでは、ノードとして表示されるソース CSS ファイルに、コードが縮小されたファイルが表示されます。このデフォルトの表示を変更するには、プロジェクトツールウィンドウでファイルのネストを設定します。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定 | プラグインページのインストール済みタブで、CSS およびファイル監視に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
csso-cli をグローバルにインストールする
埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install -g csso-cli
CSSO ファイルウォッチャーを作成する
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、ツールのファイル監視をクリックします。開くファイルウォッチャーページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押して、リストから CSSO CSS オプティマイザー定義済みテンプレートを選択します。
新規ウォッチャーダイアログが開きます。
プログラムフィールドで、
csso実行可能ファイルの場所を指定します。Node パッケージマネージャーを介して
csso-cliをインストールした場合、JetBrains Rider はパッケージ自体を検索し、フィールドにcssoエイリアスを自動的に入力します。それ以外の場合は、パスを手動で入力するか、
をクリックして、開いたダイアログでファイルの場所を選択します。ファイル監視に従って、デフォルトのファイル監視設定を受け入れるか、必要に応じて再構成し、OK をクリックします。JetBrains Rider を実行すると、ファイル監視ページに戻り、新しいファイル監視がリストに追加されます。
「有効」チェックボックスが選択されていることを確認します。
デフォルトでは、ファイル監視は現在のプロジェクトで使用できます。他のプロジェクトで使用するには、レベルリストからグローバルを選択します。
関連ページ：
ファイル監視
ファイル監視は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する JetBrains Rider システムです。JetBrains Rider は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みのファイルウォッチャーテンプレートを提供するカスタムファイル監視を設定して、他のサードパーティツールを実行することもできます。ファイルウォッチャーには、2 つの専用コードインスペクションがあります。ファイル監視使用...
新規ウォッチャーダイアログ
ファイルウォッチャーページの追加 または編集 ボタンをクリックすると、ダイアログが開きます。このダイアログを使用して、定義済みの JetBrains Rider ファイルウォッチャーテンプレートに基づいてプロジェクトファイルウォッチャーを作成したり、既存のプロジェクトファイルウォッチャーを編集したりできます。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：「名前」フィー...
ファイルのネスト規則
JetBrains Rider は、関連するファイルタイプに使用されるファイルタイプと一般的なサフィックスのデフォルト構成を提供します。たとえば、.map.ts サフィックスを持つファイルは通常、同じ名前と .ts 拡張子を持つファイルに関連しています。このようなファイルは自動的にグループ化されます。ソリューションエクスプローラー。ソリューションエクスプローラーのツールバーでクリックし、ファイルのネスト設定 ... を選択すると、これらの関係を構成したり、論理ネストを完全に無効にしたりできます。この方...
プラグインのインストール
プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...
言語およびフレームワーク: スタイルシート
JetBrains Rider を使用すると、Sass、Less、SCSS、Stylus など、CSS およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。始める前に：設定で CSS プラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに CSS と入力します。プラグインの詳細については、プラグインのマッピングを参照し...
Sass、SCSS、Less
JetBrains Rider は、Sass、Less、SCSS コードを CSS に変換するコンパイラーと統合します。JetBrains Rider でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて、ファイル監視としてコンパイラーを構成する必要があります。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブで、CSS、Sass、Less、ファイル監視の必須プラグインが有効になってい...