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