WebStorm 安裝
- 拿到工具WebStorm_7.0.3_en
示例圖1
- 點(diǎn)擊keygen.exe注冊(cè)激活碼 并且輸入自己電腦的名字.
示例圖2
- 點(diǎn)擊WebStorm_7.0.3.exe安裝.
- 輸入剛才注冊(cè)的賬號(hào)和key,就可以完成安裝.
搭建node環(huán)境安裝Less包
1.進(jìn)入磁盤拿到工具 \10.0.19.222\share\項(xiàng)目備份\常用軟件\node
- 點(diǎn)擊 node-v0.10.26-x64.msi 按默認(rèn)的路徑安裝
- 安裝完成后進(jìn)入控制臺(tái) window+R 輸入cmd 按enter
示例圖3
4.查看node的版本 輸入node -v
示例圖4
- 如果出現(xiàn)node不是外部命令的情況下,需要配置環(huán)境變量
- 右擊計(jì)算機(jī)屬性->高級(jí)系統(tǒng)設(shè)置
示例圖5
點(diǎn)擊環(huán)境變量
示例圖6
編輯系統(tǒng)path
示例圖7
找到node安裝路徑復(fù)制
示例圖8
編輯用戶變量.
示例圖9
黏貼nodeJS安裝路徑
示例圖10
進(jìn)入控制臺(tái)輸入node –v 再次查看node命令是否可用
示例圖11
如果可以接下來進(jìn)行NPM 安裝LESS的過程
在控制輸入命令node install –g less???? npm install less -g
示例圖12
程序會(huì)自動(dòng)下載LESS 包,
安裝完成后再控制臺(tái)輸入命令 lessc –v
示例圖13
出現(xiàn)版本號(hào)表現(xiàn)LESS已經(jīng)安裝完成,接下來可以到webstorm中配置編譯LESS文件
WebStorm 配置
1.進(jìn)入webStorm 創(chuàng)建項(xiàng)目并且創(chuàng)建兩個(gè)文件夾less 和 css
less: 用來存放less文件
css: 用來存放css等文件
示例圖14
配置編譯less文件
示例圖15
進(jìn)入file watchers 選項(xiàng)卡
示例圖16
需要配置參數(shù):
Arguments:
--no-color --source-map=..\css\$FileNameWithoutExtension$.css.map $FileName$
--no-color --source-map=..\img\$FileNameWithoutExtension$.css.map $FileName$
Output paths to refresh:
..\css\$FileNameWithoutExtension$.css
..\img\$FileNameWithoutExtension$.css
這里的css和img只是css文件所放置的文件夾
配置完成以后就可以進(jìn)行LESS 開發(fā)
