1、 打開(kāi)Nodejs官網(wǎng)http://www.nodejs.org/，點(diǎn)“DOWNLOADS”,點(diǎn)64-bit下載“node-v0.10.33-x64.msi”。

2、 下載好后，雙擊“node-v0.10.33-x64.msi”，按照默認(rèn)選項(xiàng)安裝Nodejs，默認(rèn)安裝路徑為：C:\Program Files\nodejs。

（請(qǐng)根據(jù)系統(tǒng)位數(shù)自行安裝）

3、 “開(kāi)始”-->cmd,打開(kāi)cmd程序，輸入“node -v”,出現(xiàn)” v0.10.33”; 輸入“npm -v”,出現(xiàn)” 1.4.28”,說(shuō)明Nodejs和npm都已安裝成功。

4、“開(kāi)始”-->cmd,打開(kāi)cmd程序，輸入“cd C:\Program Files\nodejs”,進(jìn)入nodejs安裝目錄。輸入npm install less -g 回車(chē)，安裝less組件。稍等片刻，完成后，你會(huì)發(fā)現(xiàn)C:\Users\wind\AppData\Roaming\npm\node_modules 目錄下有l(wèi)ess組件。

至此Windows7 x64系統(tǒng)下安裝Nodejs及配置less組件已基本完成，接下來(lái)我們配置WebStorm 9.0.1，使其能將less文件編譯成css文件。

5、開(kāi)啟JetBrains WebStorm 9.0.1程序，打開(kāi)一個(gè)含有l(wèi)eess的項(xiàng)目，該項(xiàng)目中含有“default.less”文件。

6、File-->Settings（設(shè)置）,打開(kāi)設(shè)置選項(xiàng)。找到“External Tools”(外部工具)擴(kuò)展工具設(shè)置項(xiàng)，點(diǎn)開(kāi)右側(cè)的“+”，在Name欄輸入“LESS”，“Tool settings”分別輸入如下：

Program: C:\Program Files\nodejs\ node.exe （你安裝目錄所在的文件）

Parameters: C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css （用戶名默認(rèn)Administrator，有變化的話自行更改，并粘貼這一行）

Working directiry: C:\Program Files\nodejs （你安裝的目錄）

確認(rèn)輸入無(wú)誤后點(diǎn)右下的“OK”按鈕。然后再點(diǎn)Settings 版右下的“Apply”應(yīng)用按鈕。

7、在Settings 面板頂端輸入“key”,找到快捷鍵設(shè)置項(xiàng)“Keymap”(快捷鍵)，在右側(cè)找到“External Tools”（外部工具）點(diǎn)開(kāi)，點(diǎn)選“LESS”并單擊右鍵，選擇“Add Keyboard Shortcut”,在出現(xiàn)其面板的“First Stroke”處同時(shí)按下“Alt+B”鍵，這樣就將“Alt+B”設(shè)置為將less文件編譯成css文件的快捷鍵。當(dāng)然你可以根據(jù)自己的實(shí)際情況設(shè)置成其它的快捷鍵。確認(rèn)好后點(diǎn)Settings 面板右下的“OK”按鈕。

8、回到打開(kāi)的default.less文件，按下“Alt+B”快捷鍵，看看“default.css”是不是生成了！

至此已成功將less文件編譯成css文件。

以上所述是小編給大家介紹的Windows7下安裝 Nodejs 并在 WebStorm 9.0.1 下搭建編譯 LESS 環(huán)境的圖文教程，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論