こんにちは

そのため、Windowsのグループ内のすべてのタイプセッター向けに統一された作業環境を準備する必要がありました。 主な目標は、最小限の必要な知識を可能な限り短時間でグループのすべてのメンバーに伝えることです。 主な問題は、多くの人がUNIXシステムに慣れておらず、Windows上で同じSASSを取得する方法がわからなかったことです。 そのため、作業環境のセットアップに関する入門記事（ステップバイステップの説明）を作成することが決定されました。



同僚のアドバイスで、パブリックドメインに入れることにしました。 これは、初心者のコーダーにとって便利だと思います。 私はかつて単純な真実に到達するために多くの時間を費やしました。



ツールの選択は純粋に個人的な問題であり、以下で説明するすべては特定のグループのために意識的に行われたと私はすぐに言わなければなりません。 この命令を使用するかどうかはあなた次第です。



それでは始めましょう！



この記事には3つのステージが含まれます。

• ステージ1-Phpstorm IDEのインストールと紹介
• ステージ2-スタイルコンパイラ（sass、scss）のインストールと構成
• ステージ3-プロジェクトコレクターのインストール、セットアップ例（gulp）

ステージ1-Phpstorm IDEのインストールと紹介

Phpstorm IDEをインストールする

公式ウェブサイトにアクセスして、30日間の無料版をダウンロードします。 30日後、 IDEを再インストールしてさらに使用したり、サブスクリプションを購入したり、 職人の魔法に頼ったりすることができます。





インストールプロセスのすべてが明確だと思います。プログラムのインストール先を示します。 インストールの1つの段階で、 IDEで開くファイルと、デスクトップにショートカットを作成するかどうかを選択するよう求められます。





インストールの最後にIDEを実行します。最初のインストール時に、設定をインポートするか、標準の設定を使用するように求められます。





次に、ライセンス（サブスクリプション）の購入または30日間の試用期間の使用が提案されます。 [30日間無料で評価]をクリックします。





次に、ホットキー（キーマップ）の設計スタイルと事前定義された設定を選択するよう求められます。 必要に応じて、サイトPhpstormテーマにアクセスして、 好みのテーマを選択できます。





これでIDEのインストールが完了しました。

Phpstorm IDEで新しいプロジェクトを作成する

IDEでは、2種類のプロジェクトを作成できます。

• ローカルプロジェクト
• リモートサーバーに関連するプロジェクト

両方のオプションをより詳細に検討し、ローカルプロジェクトの例を使用して視覚的なインターフェイスを構成します。

新しいローカルプロジェクトを作成する

ローカルプロジェクトを作成します。 これを行うには、 IDEのようこそウィンドウで、「新しいプロジェクトを作成」を選択します。 IDEの [ファイル]メニューから新しいプロジェクトを作成することもできます。





ウィンドウが開き、選択するように求められます：

• プロジェクトテンプレート
• プロジェクトの場所を示します
• プロジェクト名を指定

テンプレートを使用してプロジェクトを選択する場合、テンプレートのバージョンを選択できます。 たとえば、boostrapテンプレートはgithubのリポジトリから自動的にロードされます。





その結果、新しいプロジェクトウィンドウが開きます。 プロジェクトの名前を持つフォルダーが作成されます。 「.idea」フォルダもここにあります。決して削除しないでください ！ プロジェクトに関連付けられているすべての設定が保存されます。





また、新しいプロジェクトを作成するとき、プログラムは名前空間の名前空間を構成するように求めます。 一般に、これをわざわざプログラム自体に任せることはできません。



これを行うには、ポップアップウィンドウの[自動的に]リンクをクリックします。 このウィンドウを誤って閉じた場合、またはそれ自体を「閉じた」場合は、ステータスバーをクリックし、ターミナルで「自動的に」リンクをクリックします。 すべてを正しく行った場合、対応するメッセージが表示されます：「psr-0名前空間ルートを検出：psr-0名前空間ルートが検出されませんでした」。 ウィンドウを非表示にするには、垂直矢印の付いたアイコンをクリックします。





おめでとうございます、あなたは新しいローカルプロジェクトを作成しました。 このバージョンのプロジェクトは、自分だけが作業していて、ネットワークにアップロードする必要がない場合に非常に便利です。

リモートサーバーに関連する新しいプロジェクトを作成する

リモートサーバーに関連付けられたプロジェクトを作成するには、ようこそウィンドウで[既存のファイルから新しいプロジェクトを作成]を選択するか、 IDEメニューの[ファイル-既存のファイルから新しいプロジェクト]を選択します。







次に、使用シナリオを選択するように求められます。「Webサーバーはリモートホスト上にあり、ファイルはftp / sftp / ftps経由でアクセス可能」オプションが必要です。





次に、プロジェクトの名前を入力し、PCでの保存場所を指定します。 プロジェクトのストレージパスを変更する場合は、[カスタム]オプションを選択し、プロジェクトを配置するフォルダーを指定する必要があります。



重要！ ファイル、フォルダー、ストレージパスの命名にはラテン語のみを使用します。 一部のツールは単にキリル文字をサポートしていない可能性があるためです。



例：

• 「C：// my documents / project / demo」は悪いオプションです。プロジェクトのパスと名前にキリル文字が含まれています
• 「C：//プロジェクト/デモ」-ここではすべて問題ありません。プロジェクトのパスと名前にはラテン文字のみが含まれています

次に、新しいリモート接続を作成するか、既存の接続から選択するように求められます。 新しいsftp（shh）接続を作成し、リモートサーバーに接続するためのパラメーターを指定します。

• 名前-接続の名前、わかりやすい。 複数のテストサイトが同じIPに配置されることがあるため、完全修飾ドメイン名を記述することをお勧めします
• タイプ-ftpまたはsftp（shh）接続形式
• Sftpホスト-サーバーまたはホストのIPアドレス（たとえば、mysite.ruまたはdemo.mysite.ru）
• ポート-ポート番号（ftp（21）、sftp（22）のデフォルト）
• ルートパス-親ディレクトリへのパス（デフォルトでは、「/」のまま）、たとえば、サーバー上に2つのフォルダー（dev、www）があり、接続全体にdevフォルダーをすぐに表示する場合、パスを指定できます（/ dev /）
• ユーザー名-サーバーにアクセスするためのログイン
• パスワード-サーバーにアクセスするためのパスワード（サーバー、ターミナルに接続するたびにパスワードを入力しないように、「パスワードの保存」ボックスをチェックすることを忘れないでください）。 sshキーを使用して接続することもできます。
• 「サーバーへのHTTP接続を確認しないでください-毎回接続を確認しない場合はチェックボックスをオンにします。」

[Test sftp connection ...]ボタンを使用すると、アクセスパラメータが正しく入力されているかどうかを確認できます。 成功すると、対応するメッセージが発行されます。



「WebサーバーのルートURL」は、リモートサーバーで表示するためにファイルが開かれるパスです。 sftpホスト行がいっぱいになるとすぐに、パスが自動的に割り当てられます。





次に、プログラムはプロジェクトに属するファイルを指定するようプロンプトを表示します。このため、リモートサーバー上のプロジェクトを含むフォルダーを指定し、[プロジェクトルート]ボタンをクリックします。 私の場合、これがサーバー上にあるすべてです。 その結果、ファイルにマークが付けられた緑色の背景が表示されます。







[続行]をクリックすると、プログラムはサーバーからマークされたファイルのPCへのダウンロードを開始します。 プロジェクトは通常、ボリュームとファイル数が非常に大きいため、これは行いません。 これを行うには、「ダウンロードから除外」ボタンをクリックして、例外にファイルを追加します。 今後、必要なファイルのみをダウンロードする方法について説明します。





プログラムが提供する「次へ」をクリックして、プロジェクトのルートフォルダーのパスを表示します。 ここでは、「/」を入力するか、「完了」ボタンをクリックするだけです。





できた！ プロジェクトをリモートサーバーにリンクしました。 次に、サーバーからファイルをダウンロードして編集し、サーバーに送り返します。 まず、設定を調整する必要があります。 上記を覚えているなら、完全にダウンロードしないように、プロジェクト全体を例外に追加しました。 Ctrl + Alt + Sキーの組み合わせを押し、ビルド、実行、展開-展開セクションに移動し、除外されたパスタブをクリックし、パスをクリックしてからパスを削除ボタンをクリックして例外を削除します。 「OK」ボタンをクリックします。





その結果、すべてが正しく行われると、「リモートホスト」タブでファイルが緑色で強調表示されます。





ファイルまたはフォルダーをPCにダウンロードするには、右クリックして表示されるポップアップメニューで[ここからダウンロード]を選択する必要があります。 その後、ファイルがPCにダウンロードされます。





ファイルがダウンロードされるとすぐに、「プロジェクト」タブに表示され、ファイル転送ウィンドウに「ファイル転送*リモートサーバー名*」というメッセージが表示されます。





その後、必要なファイルを編集してサーバーに送り返します。 これを行うには、[プロジェクト]タブでファイルを右クリックし、ポップアップメニューで[アップロード先]を選択します。







オプションで、ホットキー（キーマップ）を割り当てて、ファイルをすばやくダウンロードおよびアップロードできます。



この方法は、1つのファイルのみを修正する必要がある場合に便利ですが、完全な開発のためには、サーバーへのファイルの自動送信を設定することをお勧めします。 これを行うには、キーの組み合わせ「Ctrl + Alt + S」を押すか、メニュー「ツール-展開-オプション」で変更を行います。

• 空のディレクトリを作成-空のフォルダーを作成した後、サーバーにアップロードします。
• 変更されたファイルをデフォルトのサーバーに自動的にアップロードします-「常に」を選択します
• 外部の変更をアップロードする-チェックボックスをオンにすると、他のプログラムによって変更されたファイルをアップロードできます。 例：カードcss、js
• 警告してから新しいファイルをアップロードする-「タイムスタンプとサイズを比較する」項目を選択し、ファイルが時間とサイズによって変更されたかどうかを確認します
• リモートの変更について通知する-現在のバージョンではないソースファイルをアップロードしようとした場合に警告します。 たとえば、ファイルが2人で同時に修正された場合。 上書き、保留、スキップが提供されます。

これで、リモートサーバーに関連付けられたプロジェクトの構成が完了しました。 次に、 IDEの基本設定と機能について説明します。 これは、チームが同じ知識の最小しきい値を持つために必要です。

ビジュアルインターフェイスのカスタマイズとIDEの概要

まず、「ツールウィンドウ」のサポートを有効にします。これらはIDEの機能を視覚的に切り替えることができる特別なタブです。 これは簡単に行われます。左下隅のアイコンをクリックする必要があります。その後、ブックマークが左下、右下に表示されます。 これは、 IDEメニューの[表示-ツールボタン]からも実行できます。





不要なタブを削除するには、タブを右クリックして「サイドバーから削除」を選択します。





次のタブをお勧めします。

• 左ペインで、タブ「project」、「gulp」、「npm」を​​配置します
• 下部のパネルで、「端末」、「バージョン管理」、「ファイル転送」、「休憩」、「todo」、「イベントログ」のタブを配置します。
• 右側のペインで、「リモートホスト」タブを選択します

将来的には、これらすべてのツールを検討します。



IDEで行番号、インデント、色を表示する

Ctrl + Alt + Sキーの組み合わせを押すか、[ファイル]-[設定]プログラムメニューからIDEの設定に移動し、[エディター]-[全般]-[外観]セクションに移動して、チェックボックスをオンにします

• 「行番号を表示」-ドキュメントの行数を表示
• 「垂直インデントガイドを表示する」-垂直方向の配置を表示する
• 「CSSカラープレビューアイコンを溝に表示」-行番号の近くに現在の色の小さなボックスを表示します
• 「空白を表示」-タブまたはスペースにインデントを表示します。 カスタマイズは、初心者のコーダーがセマンティクスに準拠するのに適しています。

他の設定は変更できません。





その結果、以下の画像に示すように、すべてがほぼ表示されるはずです。

コードのヒント

デフォルトでは、エディターはコードにコメントまたはエラーがあるかどうかを通知します。 右側には、現在のドキュメントに黄色または赤のストライプが表示されます。 ストリップをクリックすると、エラーまたはコメントが発生した行にすぐに移動します。 また、ストリップにカーソルを合わせるだけで、エラー\コメントを表示できます。

ブラウザでページを表示

ブラウザでページを表示するには、ドキュメントの右隅にマウスを移動します。ウィンドウが表示され、ページを表示するブラウザを選択するよう求められます。 これは、キーの組み合わせ「Alt + F2」を押すことでも実行できます（キーの組み合わせへの注意は異なる場合があります！）。



デフォルトでは、 IDEは表示用にlocalhosteのページを開きます。 プロジェクトがリモートサーバーに接続されている場合、パス（WebサーバーのルートURL）で指定されたページが開きます。





ブラウザのリストを設定し、デフォルトで開くブラウザを指定し、ドキュメントの右上隅のツールチップを無効にすることもできます。 これを行うには、下の画像に示すように、「Ctrl + Alt + S」というキーの組み合わせを押して「ツール-Webブラウザー」セクションに移動するか、検索を使用します。

エメットツール

このツールは既にプリインストールされているため、追加の設定を行う必要はなく、すぐに使用できます。 エメットツールのドキュメントは、 Webサイト 、 例 、 チートシートで参照できます。

リモートサーバー上でのみファイルを編集する

リモートサーバー上のファイルを編集するには、「リモートホスト」タブをクリックし、PCにダウンロードせずにファイルを開きます（リモートホストタブのファイルを2回クリックします）。 ファイルをサーバーに送信するには、アイコンをクリックします 。 アイコンをクリックして編集内容をロールバックすることもできます 、またはアイコンをクリックして変更を確認します 。

ローカルファイル履歴の操作

ファイル変更のローカル履歴を表示するには、ファイルを右クリックして「ローカル履歴-履歴を表示」を選択する必要があります。





その結果、ウィンドウが開き、使用可能なファイル変更の履歴全体と2つの列が左側に表示されます。 左の列は履歴からのファイルの状態で、右の列は現在のものです。 編集できるのは右側の列のみであることに注意してください。 ボタンを使用して、変更をロールバックしたり、パッチを保存したりすることもできます。 ウィンドウを閉じると、右側の列のすべての変更が自動的に保存されます。

2つのファイルの内容の比較

PC上の2つのファイルを比較するには、ファイルを右クリックして、表示されるウィンドウで[比較する]を選択し、比較するファイルを指定する必要があります。





ローカルファイルとリモートサーバー上のファイルを比較するには、ファイルを右クリックして、「Deploymet-Compare remote version on * remote server name *」を選択する必要があります。

エンコードを変更する

cp-1251からutf-8にファイルをトランスコードする必要が生じることがあります。 これを行うには、ファイルを右クリックし、「ファイルエンコード」を選択します。 これは、エンコードの選択をクリックすることでも実行できます。

ハイフン文字を修正

UNIXシステムでは、改行はWindowsの文字とは異なります。 このため、ファイルを比較するときに、ファイル全体が変更済みとして強調表示され、実際には1文字しか変更されていないことがあります。

UNIXハイフネーションを使用することをお勧めします。 プログラムメニューの「ファイル-ファイルのエンコード」。

タブ設定、タブ/スペースの変換

文書に複数の集計オプションが含まれている場合、エディターがこれを通知し、選択を提案します。





これは、[Ctrl + Alt + S]を押して[エディター-コードスタイル]セクションに移動し、目的のドキュメント形式を選択し、[タブ文字を使用]チェックボックスをオンにすることでも設定できます。





文書をすばやく再フォーマットするには、「編集-インデント変換」プログラムのメニューで使用する記号を選択する必要があります。

PC上のファイルの場所を見つける

PC上のファイルの場所をすばやく見つけるには、ファイルを右クリックして[エクスプローラーで表示]を選択する必要があります。選択したファイルのフォルダーが開きます。

セマンティックコードへのクイックフォーマット

不十分な書式設定または最小化のために読み取ることができないファイルに出くわすことがあります。 ここで、コードの再構成は、プログラムメニューで[コード-コードの再フォーマット]を選択するのに役立ちます。

ターミナルおよびsshセッションで作業する

プログラムのメニューツール「表示-ツールウィンドウ-ターミナル」を使用して、クイックアクセスパネルからキーの組み合わせ（Alt + F12）を使用して、ターミナルを呼び出すことができます。 これは基本的にWindowsのコマンドラインです。



SSHターミナルを起動してサーバーに接続するには、[ツール-SHHセッションの開始]プログラムのメニューに移動して、既存の接続を選択するか、新しい接続パラメーターを指定する必要があります。

メモとブックマーク

メモを追加するには、todoというテキストを含むHTMLコメントを追加する必要があります。 プログラム「表示-ツールウィンドウ-TODO」のメニューから、またはクイックアクセスパネルからメモを使用してパネルを呼び出すことができます。 フィルターを使用して、メモの表示を構成できます。 メモをダブルクリックすると、ファイルが自動的に開き、メモにコースが配置されます。

<!--todo   -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブックマークを使用すると、コードの一部をすばやく表示または表示できます。 ブックマークを追加するには、目的のコードの先頭にカーソルを置き、ホットキー（F11）またはメニュープログラム[ナビゲーション-ブックマーク-ブックマークの切り替え]からブックマークを配置する必要があります。 ブックマークはチェックマークとして表示されます。





ホットキー（Shift-F11）を使用して、またはプログラムメニューの[ナビゲーション-ブックマーク-ブックマークを表示]からすばやく参照するには、表示ウィンドウを呼び出します。

PCでページをリロードせずにLiveEdit（LivePreview）ビューを変更

LiveEditプラグインをインストールします。 これを行うには、プログラム設定を開き（Ctrl + Alt + S）、[プラグイン]セクションに移動して[リポジトリの参照...]ボタンをクリックします。





開いたウィンドウの検索バーに「ライブ編集」と入力し、[インストール]ボタンをクリックします。 インストール後、プログラムは再起動するよう要求します。





再度、プログラム設定（Ctrl + Alt + S）に移動し、「ビルド、実行、デバッグ-ライブ編集」に進み、「自動入力（300ミリ秒）」にチェックマークを付けます。





ここで、エディターとブラウザーをリンクするために、ブラウザーのアドオンをインストールする必要があります。 アドオンは、Chrome、Yandexブラウザーでのみ機能することに注意してください。 将来、開発者はFirefox、Safariブラウザーのアドオンを約束します。 詳細については、開発者のWebサイトで読むことができます。





ライブ編集を開始します。そのために、[実行]-[プログラムのデバッグ]メニューの項目を選択するか、クイックアクセスパネルのバグアイコンをクリックします。

「ライブ編集」モードは、ローカルプロジェクト、つまり、PC上にあり、リモートサーバーに接続されていないファイルに対してのみ機能するという事実に注目してください。

ステージ2-スタイルコンパイラ（sass、scss）のインストールと構成

コンパイラをインストールするには、以下をインストールする必要があります。

• nodejs
• ルビー
• gem sass、gem scss

重要！ インストールは管理者に代わって実行する必要があります。

Nodejsのインストール

公式サイトからWindows用のインストーラーをダウンロードします 。 標準インストールですが、コンポーネントの選択段階で、「パスに追加」項目が選択されていることを確認してください。 下の画像のようになります。

Rubyをインストールする

公式サイトからWindows用のインストーラーをダウンロードします 。 標準インストールですが、コンポーネントの選択段階で、「Ruby実行可能ファイルをPATHに追加」チェックボックスがオンになっていることを確認してください。





Phpstormを閉じるか、プログラムメニューの[ファイル-Chacheの無効化/再起動-再起動のみ]を使用してPhpstormを再起動します。 nodejsとrubyのバージョンを確認します。 これを行うには、ターミナルに入力します

 node -v
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして

 gem -v
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果：





端末が機能するためには、コンピューターを再起動する必要がある場合があります。 それはすべてPhpstormのバージョンに依存します。

gem sass、scssをインストールします

パッケージをインストールするには、ターミナルで交互に次のコマンドを入力する必要があります。

 gem install sass
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして

 gem install scss
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のインストール中に、Rubyアプリケーションを実行できるかどうかを尋ねる標準のWindowsウィンドウがポップアップ表示されます。 OKをクリックします。







インストールが完了したら、ファイルがsassからcssに自動的にコンパイルされるように構成します。

新しい.sassまたは.scssファイルを作成した場合、そのプログラムを開くと、「File Watcher」を割り当てるよう自動的に提供されます。





「ウォッチャーの追加」リンクをクリックすると、オブザーバー設定のウィンドウが自動的に開きます。 すべてが正しくインストールされていれば、programmフィールドにsass.batファイルへのパスがあります。





[OK]をクリックすると、クイックセットアップが完了します。 コンパイラをチェックします。このために、sassファイルに任意のコードを記述します。 その結果、「Ctrl + S」を押すと、スタイルがコンパイルされます。





ファイルでエラーが発生した場合、プログラムはエラーを表示し、ファイルはコンパイルされません。





しかし、.sassファイル（プリプロセッサ）が1つのフォルダーにあり、.cssの結果を別のフォルダーに配置する必要があることがよくあります。 これを行うには、方法を修正するだけです。 キーの組み合わせ（Ctrl + Alt + S）を押して、[ツール-ファイル監視]セクションに移動します。





次に、Sass行で2回クリックします。





シンボル「：」の後のフィールド「引数」では、cssフォルダーへのパスを指定する必要があります。 「マクロの挿入」ボタンをクリックし、「$ FileDir」変数を挿入します。 この場合、「$ FileDir」はプロジェクトへのパスを自動的に置き換えるプログラム変数です。





結果は$FileDir$\css\$FileNameWithoutExtension$.css



。最初の変数はプロジェクトへのパス、次に.cssファイルを保存するフォルダーの名前、およびファイル変数の名前です。 この$FileDir$\css\$FileNameWithoutExtension$.css



は、「要素への出力パス」フィールドに挿入する必要があります。 パス表示にバックスラッシュ「\」があることに注意してください。



その結果、画像のようになり、「OK」ボタンをクリックします。





これを確認するには、.sassファイルに変更を加えて「Ctrl + S」を押すだけです。 プログラムは、「css」という名前のフォルダーを自動的に作成し、コンパイル済みファイルをそのフォルダーに入れます。



古いファイルは削除できます。





.scssファイルの場合、原則は同じです。 「File Watchers」のみがSCSSになり、プログラムはprogrammフィールドのscss.batファイルへのパスを置き換えます。







追加のコンパイラー設定は、公式Webサイトで見ることができます

ステージ3-プロジェクトコレクターのインストール、セットアップ例（gulp）

ゼロからのインストールと構成の例

構成ファイルを作成するには、ターミナルでnpm init



と入力する必要があります。その後、Enterボタンを押すことができる一連の質問が表示されます。 「エントリポイント」フィールドにファイルの名前のみを入力します。この場合、「gulpfile.js」になります。





間違ったものをクリックした場合、または修正する場合は、package.jsonファイル自体に移動してこれを行うことができます。このファイルは、プロジェクトのルートに作成および配置されています。



設定の詳細については、公式Webサイトをご覧ください 。





ここで、gulp自体といくつかの便利なプラグインをインストールする必要があります。それをautoprefixerにします。 PostCssとAutoprefixerについては、公式Webサイトで読むことができます。



Gulpをインストールするには、ターミナルnpm install gulp --save-dev



コマンドを入力し、インストールが完了するのを待つ必要があります。 すべてが順調に進んだ場合、ルートにGulpパッケージマネージャーがインストールされるnode_modulesフォルダーを作成します。 キーは--save-devで、パッケージをローカルにインストールし、他のプロジェクトで使用するために必要です。





autoprefixerをインストールします 。このために、コマンドnpm install gulp-autoprefixer --save-dev



を入力し、インストールが完了するのを待ちます。



公式Webサイトへのautoprefixerのインストールは、 npm Webサイトへのインストールとは異なることに注意してください。 これは、公式サイトでは、autoprefixerがPostCss（ポストプロセッサ）を介して機能するためです。 将来的には、PostCSSを介してこのプラグインを使用することをお勧めします。



ここで、package.jsonファイルを開くと、アドオンが「devDependencies」ブロックに自動的に登録されていることがわかります。

プラグインのインストールが完了しました。構成する必要があります。



これを行うには、ルートに「gulpfile.js」ファイルを作成し、 npm Webサイトの使用状況ブロックにリストされているコードを貼り付けて保存します（Ctrl + S）。





より明確にするために小さな変更を加えました。







プラグインの動作を確認してください。 display：flexプロパティを.sassファイルに追加して保存します。 デフォルトでは、結果を.cssファイルにコンパイルします。





タスクを完了するには、gulpパネルを開き、「gulpfile.js」ファイルを右クリックして「Show Gulp Tasks」を選択するか、プログラムのメニューから「View-Tools WIndows-Gulp」を選択します。 その結果、タスクのリストを含むパネルが開きます。







注意！ ファイル「gulpfile.js」を変更したら、タスクを更新する必要があります。





割り当てを2回クリックし、実行の終了を待ちます。 すべてがうまくいった場合、ターミナルはこれを通知します。 ご覧のとおり、.cssファイルにプレフィックスを追加しました。





たとえば、コードを縮小する別のプラグインを追加します。

npm install gulp-cssnano --save-dev



ターミナルで次のコマンドを実行し、インストールが完了するのを待ちます。

ここで、 サイトで指定されたドキュメントに従って「gulpfile.js」を更新する必要があり、gulpタブのタスクを更新することを忘れないでください。





その結果、別のタスクが必要になります。





「nano」のタスクを2回クリックすると、余分なスペース、インデント、ハイフネーションなどのない、縮小されたファイルが取得されます。





ご覧のとおり、複雑なことは何もありません。 より便利なプラグインはこちらで見つけることができます。VKontakteグループに加入することをお勧めします。VKontakteグループでは、プロジェクトの開発を追跡し、 PostCssの作者の質問を苦しめることができます。



次に、論理的な質問があります。「他のプロジェクトのすべてのプラグインを毎回インストールする必要がありますか？」



毎回すべてのプラグインと設定を手動で配置しないために、「package.json」および「gulpfile.js」ファイルを保存することをお勧めします。 将来的には、これら2つのファイルを新しいプロジェクトにコピーしてnpm install



コマンドを実行するだけで、すべてのアドオン（autoprefixer、nano ...）が自動的にインストールされます。 常に単一のファイルストレージ構造に従うことが非常に重要です。 その後、ファイルパスを編集する必要はありません。 ファイル構造を整理する方法は、インターネットで検索できます。



これでセットアップは完了です。 一般に、読み取りと構成にかかる時間は1時間以内です。 この記事がお役に立てば幸いです。



計画は、バージョン管理システム（git、mercurial）のレビューを追加します。