PhpStormのファイル監視機能でLESSをCSSにコンパイル
PhpStormのファイル監視機能を設定したときの覚書。今まで仮想マシンにSSHでログインしてgruntのファイル監視を使っていたけれど、成功したのか失敗したのか分かりにくかった。 環境: Windows 10, PhpStorm 2016.3, Node.js 6.9.1 参考 How to create file watchers transpiler configurations. | PhpStorm 目次 Windows10にlessをインストール File Watchersの設定 less-plugin-clean-cssをインストール 1.Windows10にlessをインストール Node.jsは既にインストール済み。npmでlessモジュールをインストールする。cmdプロンプトを立ち上げて > npm install -g less インストールされるフォルダ C:\Users\Daiki\AppData\Roaming\npm\node_modules 2.File Watchersの設定 PhpStormの設定からFile Watcherを新規追加。Programはすでに入ってた。 ちなみに「Sources」ディレクトリに設定して参照している。参考: PhpStorm 2016.3 Help :: Directories これでlessファイルを編集してみるとコンパイルされた。 3.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」をついでにインストールすることにした。 less-plugin-clean-css | NPM > npm install -g less-plugin-clean-css File WatcherのArguments設定で「--compress」と