PhpStormでlessファイルの監視/コンパイルなどの有効化と設定

PhpStormのFile WatcherがLESSなどのファイル変更を監視し、サードパーティーのコンパイラーでcssファイルの作成

  • LESS、SASSなどが普及してきまして、開発環境に取り入れべきです
  • PhpStormが直接にLESSなどのファイルをcssにコンパイルすることはしません
  • サードパーティーのLESSコンパイラー（例：node.jsなど）をサポートします
    • PhpStormがFile Watcherツールがあり、ファイルの更新監視ができます

Node.jsをローカル環境にインストールして、PhpStormのFile WatcherでLESSをcssへの変換

  • Node.jsをダウンロードして、ローカル環境にインストールします
  • PhpStormでFile Watcher設定でLESS監視設定
    • PhpStorm ⇒ Setting ⇒ Tools ⇒ File Watchers で新規Lessワーチャーを作成
    • PhpStormが初期Lessワーチャーが用意されているので、その初期設定のままで動作します
      PhpStormでLessファイルワーチャー（File Watcher）の監視/コンパイル設定
  • 初期設定のままでは、任意のフォルダにあるlessが変更したらすぐにcssに変換されるので、それを避けるために、作業環境を指定します（指定したディレクトリ以外は無視）
    • LessのFile Watcher設定画面で「Working directory」でマクロ変数（例：$FileDir$など）具体的に作業ディレクトリ（例：c:\develop\php\source\project\css）を指定すればよいです
    • 「Track only root files」もチェックします

コマンドプロンプトでLessをcssへのコンパイル注意点：アウトプットのディレクトリをちゃんと指定する

  • node.jsがローカル環境にインストールすれば、コマンドプロンプト（Windowsの場合）でLessファイルをcssへコンパイルすることができます 
    • lessc [入力ファイル(.less)] > [出力ファイル(.css)]
    • 例： lessc test.less test.css
  • コンパイル環境をパスで指定する場合： c:\node\nodist\bin\lessc
    • プロンプトが違うディレクトリにいる：　例： c:\
    • 出力ファイルのパスが指定しないと、出力ファイルがプロンプトのディレクトリに出力されます 
      // プロンプトがc:\ にいます
c:\node\nodist\bin\lessc c:\develop\source\php\project\css\test.less  test.css
// この場合に、出力ファイル（test.css）がc:\に出力されます

c:\node\nodist\bin\lessc c:\develop\source\php\project\css\test.less  c:\develop\source\php\project\css\test.css
// この場合に、出力ファイル（test.css）がc:\develop\source\php\project\css\に出力されます

phpStormのFileWatcherでjsファイルの最小化（minify）関連設定

やりたいこと：開発環境（phpStorm）でｊｓファイル最小化（minify）したいです

  • 背景： ｐｈｐStorm10.1、ｊｓファイル最小化ツール：YUI Copressor2.4.8でｊｓファイルを最小化します
    • YUI Copressorがｊｓファイル最小化の構文： 
      java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
    • javaのjarファイルを実行して、ｊｓファイル最小化を行います
  • ｊｓファイル最小化ツール（YUI Copressor）をダウンロードして、ローカルにインストールします

ｐｈｐStormのFileWatcherでｊｓファイル最小化を行います

  • ｐｈｐStormの設定（File >> Settings）画面のTools >> FileWatcher設定画面を開きます
  • FileWatcherを追加して、YUI Copressorの構文を参考して各パラメーターを設定します
    ｐｈｐStormのFileWatcherでｊｓファイルの最小化関連設定
    • Name： 適切な名前を付けます
    • Options：初期設定のままで、変更する必要はありません
    • Watcher Settings
      • File type： javaScript
      • Scope： Project Files
      • Program： YUI Compressorの構文のjarファイルのパス＋jarファイル
      • Arguments： YUICompressorのjarファイル実行の引数（ｊｓファイル＋最小化ファイル名＋その他設定）
      • Working directory： ｊｓファイルと最小化ファイルの作業ディレクトリ（Argumentsのｊｓファイルと最小化（minファイル）がこのディレクトリをベースにします）
      • Envirenment variables： 何も必要はありません
      • Output paths to refresh： ｊｓファイル名と同じにします （これが間違うと、minファイルがたくさん生成されます）