WebStorm是一個(gè)非常棒的Web前端開發(fā)編輯器,被程序猿們成為“最智能的JavaScript IDE”。對HTML5、Bootstrap框架、Node.js等都有完美支持。目前最新版本為WebStorm 8.0.x。下面就介紹一下如何在WebStorm 8.0安裝LESS編譯環(huán)境。
1、首先安裝WebStorm 8.0
在官方下載并安裝WebStorm 8.0.x,具體步驟就不說了,沒什么特別之處。
2、安裝NodeJs
NodeJs官方版本有32位和64位,可以根據(jù)實(shí)際需要進(jìn)行選擇安裝。
安裝成功后,在“命令提示符”(Win+R)下運(yùn)行“node -v”和“npm -v”能夠顯示版本號就說明成功了(如圖)。
3、安裝LESS
在“命令提示符”下運(yùn)行命令“npm install less -g”,然后npm就開始下載并安裝LESS。
安裝成功的界面是這樣的(如圖)。
在這里,我們能夠看到lessc安裝的目錄,這個(gè)要先記下來。
4、在WebStorm里面配置LESS編譯
這個(gè)步驟稍微復(fù)雜一些,打開WebStorm,找到“File -> Settings”,在“IDE Settings”里面找到“External Tools”。
點(diǎn)擊“+”,如圖填寫“Name”和“Group”,在“Tool settings”里面有三個(gè)項(xiàng)目需要填寫。“Program”選擇“node.exe”的實(shí)際路徑,“Working directory”就是nodejs的安裝目錄。
最重要的就是“Parameters”,格式為:
lessc安裝的目錄lessc $FilePath$
這里就用到了之前我們記錄下來的lessc安裝的目錄。
我這里實(shí)際上是:
C:Users用戶名AppDataRoaming pm ode_moduleslessinlessc $FilePath$
到這里,就完成一大半了,F(xiàn)在我們可以新建一個(gè)工程,并且打開一個(gè)less文件了。
在初次打開less文件的時(shí)候,在編輯界面的右上方會出現(xiàn)一個(gè)“Add watcher”鏈接,這里就是為了為此項(xiàng)目的less文件配置watcher的地方,點(diǎn)擊開可以對輸出路徑進(jìn)行配置“Output paths to refresh”,其他配置無需變化。
如果想再次修改watcher,在“File -> Settings -> External Tools”里面可以再次修改。