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文件里按下快捷键就会自动补全