webstorm+less 前端环境搭建

WebStorm 安装

1. 拿到工具WebStorm_7.0.3_en

示例图1

2. 点击keygen.exe注册激活码 并且输入自己电脑的名字.

示例图2

3. 点击WebStorm_7.0.3.exe安装.
4. 输入刚才注册的账号和key,就可以完成安装.

搭建node环境安装Less包

1.进入磁盘拿到工具 \10.0.19.222\share\项目备份\常用软件\node

2. 点击 node-v0.10.26-x64.msi 按默认的路径安装
3. 安装完成后进入控制台 window+R 输入cmd 按enter

示例图3

4.查看node的版本 输入node -v

示例图4

5. 如果出现node不是外部命令的情况下,需要配置环境变量
6. 右击计算机属性->高级系统设置

示例图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 开发