WebStorm 8.0安装LESS编译环境的教程

2014-09-28 12:41:40来源:威易网作者:icech

WebStorm是一个非常棒的Web前端开发编辑器,被程序猿们成为“最智能的JavaScript IDE”。对HTML5、Bootstrap框架、Node.js等都有完美支持。目前最新版本为WebStorm 8.0.x。下面就介绍一下如何在WebStorm 8.0安装LESS编译环境。

WebStorm是一个非常棒的Web前端开发编辑器,被程序猿们成为“最智能的JavaScript IDE”。对HTML5、Bootstrap框架、Node.js等都有完美支持。目前最新版本为WebStorm 8.0.x。下面就介绍一下如何在WebStorm 8.0安装LESS编译环境。

1、首先安装WebStorm 8.0

在官方下载并安装WebStorm 8.0.x,具体步骤就不说了,没什么特别之处。

2、安装NodeJs

NodeJs官方版本有32位和64位,可以根据实际需要进行选择安装。

安装成功后,在“命令提示符”(Win+R)下运行“node -v”和“npm -v”能够显示版本号就说明成功了(如图)。

\

3、安装LESS

在“命令提示符”下运行命令“npm install less -g”,然后npm就开始下载并安装LESS。

安装成功的界面是这样的(如图)。

\

在这里,我们能够看到lessc安装的目录,这个要先记下来。

4、在WebStorm里面配置LESS编译

这个步骤稍微复杂一些,打开WebStorm,找到“File -> Settings”,在“IDE Settings”里面找到“External Tools”。

点击“+”,如图填写“Name”和“Group”,在“Tool settings”里面有三个项目需要填写。“Program”选择“node.exe”的实际路径,“Working directory”就是nodejs的安装目录。

\

最重要的就是“Parameters”,格式为:

lessc安装的目录lessc $FilePath$

这里就用到了之前我们记录下来的lessc安装的目录。

我这里实际上是:

C:Users用户名AppDataRoaming pm ode_moduleslessinlessc $FilePath$

到这里,就完成一大半了。现在我们可以新建一个工程,并且打开一个less文件了。

在初次打开less文件的时候,在编辑界面的右上方会出现一个“Add watcher”链接,这里就是为了为此项目的less文件配置watcher的地方,点击开可以对输出路径进行配置“Output paths to refresh”,其他配置无需变化。

\

如果想再次修改watcher,在“File -> Settings -> External Tools”里面可以再次修改。

关键词:WebStormLESScss