PhpStormのファイル監視機能でLESSをCSSにコンパイル

投稿日：

PhpStormのファイル監視機能を設定したときの覚書。今まで仮想マシンにSSHでログインしてgruntのファイル監視を使っていたけれど、成功したのか失敗したのか分かりにくかった。

環境： Windows 10, PhpStorm 2016.3, Node.js 6.9.1

 

参考

 

目次

  1. Windows10にlessをインストール
  2. File Watchersの設定
  3. less-plugin-clean-cssをインストール

 

１．Windows10にlessをインストール

Node.jsは既にインストール済み。npmでlessモジュールをインストールする。cmdプロンプトを立ち上げて
> npm install -g less

インストールされるフォルダ

C:\Users\Daiki\AppData\Roaming\npm\node_modules

 

２．File Watchersの設定

PhpStormの設定からFile Watcherを新規追加。Programはすでに入ってた。

image

ちなみに「Sources」ディレクトリに設定して参照している。参考：PhpStorm 2016.3 Help :: Directories

これでlessファイルを編集してみるとコンパイルされた。

 

３．less-plugin-clean-cssをインストール

出力されたCSSファイルを見てみると先頭に

The compress option has been deprecated. We recommend you use a dedicated css minifier, for instance see less-plugin-clean-css.

とあったので「less-plugin-clean-css」をついでにインストールすることにした。

> npm install -g less-plugin-clean-css

File WatcherのArguments設定で「--compress」としてた箇所を置き換え。

--clean-css="--s1 --advanced --compatibility=ie8" $Sourcepath$\assets\less\main.less

clean-cssのオプションは公式サイトを参考に

 

main.cssとmain.mini.cssという形で出力してほしくなった。これはまた別の機会に調べる。

 

< Related Posts >