webstorm+less 前端环境搭建

WebStorm 安装

  1. 拿到工具WebStorm_7.0.3_en
webstorm+less 前端环境搭建_第1张图片
示例图1
  1. 点击keygen.exe注册激活码 并且输入自己电脑的名字.
webstorm+less 前端环境搭建_第2张图片
示例图2
  1. 点击WebStorm_7.0.3.exe安装.
  2. 输入刚才注册的账号和key,就可以完成安装.

搭建node环境安装Less包

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

  1. 点击 node-v0.10.26-x64.msi 按默认的路径安装
  2. 安装完成后进入控制台 window+R 输入cmd 按enter
webstorm+less 前端环境搭建_第3张图片
示例图3

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

webstorm+less 前端环境搭建_第4张图片
示例图4
  1. 如果出现node不是外部命令的情况下,需要配置环境变量
  2. 右击计算机属性->高级系统设置
webstorm+less 前端环境搭建_第5张图片
示例图5

点击环境变量

webstorm+less 前端环境搭建_第6张图片
示例图6

编辑系统path

webstorm+less 前端环境搭建_第7张图片
示例图7

找到node安装路径复制

webstorm+less 前端环境搭建_第8张图片
示例图8

编辑用户变量.

webstorm+less 前端环境搭建_第9张图片
示例图9

黏贴nodeJS安装路径

webstorm+less 前端环境搭建_第10张图片
示例图10

进入控制台输入node –v 再次查看node命令是否可用

webstorm+less 前端环境搭建_第11张图片
示例图11

如果可以接下来进行NPM 安装LESS的过程
在控制输入命令node install –g less???? npm install less -g

webstorm+less 前端环境搭建_第12张图片
示例图12

程序会自动下载LESS 包,
安装完成后再控制台输入命令 lessc –v

webstorm+less 前端环境搭建_第13张图片
示例图13

出现版本号表现LESS已经安装完成,接下来可以到webstorm中配置编译LESS文件

WebStorm 配置

1.进入webStorm 创建项目并且创建两个文件夹less 和 css
less: 用来存放less文件
css: 用来存放css等文件

webstorm+less 前端环境搭建_第14张图片
示例图14

配置编译less文件

webstorm+less 前端环境搭建_第15张图片
示例图15

进入file watchers 选项卡

webstorm+less 前端环境搭建_第16张图片
示例图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 开发

你可能感兴趣的:(webstorm+less 前端环境搭建)