PhpStorm運用File Watchers自動編譯Lesscss

PhpStorm 6以前只能藉助 Less css compiles 來實現這一功能,雖然也很是的實用,可是import文件多了以後編譯會稍稍有點慢.

File Watchers是PhpStorm 6新增的功能,能夠用lessc自動編譯less文件:

1.能夠使用不一樣的文件夾區分less文件和css

application.less的內容以下:

2.Ctrl+Alt+S調出設置對話框,切換到File Watchers:

點擊右邊的號選擇Less:

在Program填寫lessc的路徑,若是須要編譯爲yui compressor壓縮的css文件能夠添加-x參數:

這樣就能夠正常編譯less文件了,可是這樣作會連同當前打開的less文件一塊兒編譯,因此也能夠配置Arguments內的

$FileName$和Output paths內的$FileNameWithoutExtension$.css爲指定的文件,下面是我常用的配置:

這樣就會編譯爲文章開始處圖片內的目錄結構了,但願對各位前端和PHPer有幫助~