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