WebStorm 安装
- 拿到工具WebStorm_7.0.3_en
示例图1
- 点击keygen.exe注册激活码 并且输入自己电脑的名字.
示例图2
- 点击WebStorm_7.0.3.exe安装.
- 输入刚才注册的账号和key,就可以完成安装.
搭建node环境安装Less包
1.进入磁盘拿到工具 \10.0.19.222\share\项目备份\常用软件\node
- 点击 node-v0.10.26-x64.msi 按默认的路径安装
- 安装完成后进入控制台 window+R 输入cmd 按enter
示例图3
4.查看node的版本 输入node -v
示例图4
- 如果出现node不是外部命令的情况下,需要配置环境变量
- 右击计算机属性->高级系统设置
示例图5
点击环境变量
示例图6
编辑系统path
示例图7
找到node安装路径复制
示例图8
编辑用户变量.
示例图9
黏贴nodeJS安装路径
示例图10
进入控制台输入node –v 再次查看node命令是否可用
示例图11
如果可以接下来进行NPM 安装LESS的过程
在控制输入命令node install –g less???? npm install less -g
示例图12
程序会自动下载LESS 包,
安装完成后再控制台输入命令 lessc –v
示例图13
出现版本号表现LESS已经安装完成,接下来可以到webstorm中配置编译LESS文件
WebStorm 配置
1.进入webStorm 创建项目并且创建两个文件夹less 和 css
less: 用来存放less文件
css: 用来存放css等文件
示例图14
配置编译less文件
示例图15
进入file watchers 选项卡
示例图16
需要配置参数:
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文件所放置的文件夹
配置完成以后就可以进行LESS 开发
