webstorm環境安裝配置（less+autoprefixer）

node安裝：

參考地址：http://www.runoob.com/nodejs/nodejs-install-setup.html

1.下載node安裝包并完成安裝

2.在開始菜單打開node

3.查看是否安裝完成（npm是node自帶安裝的）

命令：node -v

　　　npm -v

?

less安裝：

參考地址：http://less.bootcss.com/#getting-started

1.安裝命令：$ npm install -g less（-g為全局安裝）

2.查看是否安裝完成

3.在webstorm上安裝編譯less快捷鍵

program:D:\node\node.exe　　//node.exe安裝路徑

parameters:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css

working directory:D:\node

設置快捷鍵

?

4.webstorm安裝自動更新

?

?

program：C:\Users\Administrator\AppData\Roaming\npm\lessc.cmd

arguments：

$FileParentDir(less)$$FileDirPathFromParent(less)$$FileName$
$FileParentDir(less)$$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css

//說明

$FileParentDir(less)$ 是獲取 less 目錄的路徑

$FileDirPathFromParent(less)$ 是獲取 less 文件到 less 目錄的路徑

$FileNameWithoutExtension$ 是獲取 less 文件不帶后綴的名字

5.完成，新建less文件時自動新建css

?

安裝autoprefixer(css自動補全)

參考http://www.css88.com/archives/5670

1.安裝命令：npm install -g autoprefixer

2.webstorm設置快捷鍵

program:C:\Users\Administrator\AppData\Roaming\npm\postcss.cmd

parameters:-u autoprefixer -o $FileDir$\$FileName$ ?$FileDir$\$FileName$

working directory:$ProjectFileDir$

//program路徑地址，我的時全局安裝，所以在c盤下

?

?設置快捷鍵

?3.完成，在css文件里按下快捷鍵就會自動補全

?