phpstorm如何实现LESS自动生成CSS？

我之前开发less用的是Hbuilder 编辑器，对于less这个编辑器有一个好处就是能够自动编译less生成一个css文件，并不需要开发人员额外的进行配置。而phpstorm本身并没有自动这个功能，那么它如何实现？

可以分为两个方面配置。以我自己开发环境为例，我的电脑是win10系统（其他系统的朋友也可以做个参照）。

第一部分：LESS的安装

1.先安装node.js 下载安装包（注意适用平台）https://nodejs.org/en/ -> 点击安装（傻瓜式操作，点击next到底，注意安装nmp方式的node（一般在第二个位置，已安装好了没法截图））

2.测试一下是否成功安装了node;打开cmd命令窗口

node -v

npm -v

如果都成功返回版本号则表明安装成功。

3.less依赖环境有了，现在可以安装lessc模块了。很简单：

cd C:\Program Files\nodejs\node_modules\npm

npm install less

在cmd窗口依此键入以上两命令等待安装

4.安装css压缩插件less-plugin-clean-css

cd C:\Program Files\nodejs

npm install less-plugin-clean-css

在cmd窗口依此键入以上两命令等待安装(安装耗时长些，请耐心等待)

wind10用户需要注意， 安装的过程如果出现errno:-4048错误，这个时候你需要以管理员身份打开cmd （C:\Windows\System32\cmd.exe）,重新3、4步骤。

第二部分：配置phpstorm

最新版本的phpstorm提供了file watcher 工具，可以在这里添加less和系统安装的less进行对接。

1.打开file watchers ：File->Settings->Tools->File Watchers ,File Watchers窗口点击一个‘+’选择LESS，打开Less窗口。

2.配置LESS，如下图

3.参数说明：

Progame(程序):即执行LESS指令的程序路径，我安装的路径是：C:\Program Files\nodejs\node_modules\npm\node_modules.bin\lessc.cmd（每个人安装路径不一样要因人而异，反正找到lessc.cmd这个路径就行，如果安装上面的方式安装less可以肯定的是这个在nodejs目录里）

Arguments:--clean-css $FileName$,压缩css代码，如果不压缩就不用更改此项

Working directory：在此目录中的less文件执行编译的，其他目录的LESS就不会自动编译。默认即可

Output paths to refresh:指定生成css文件的路径（生成的css你要搁在那个目录下或者重命名都可以在这里设置）。默认即可

4.测试结果:新建一个less文件，ctrl+s保存就会自动生成一个编译过的css文件

ok，到这里大家就能够用phpstorm开发LESS自动编译CSS，希望上面介绍能够切实的帮到大家。

题外话

虽然目的已达到，但想多扯几句。大家如果有心在安装过程中肯定会发觉一点，less安装是相对独立的并没有涉及到phpstorm工具的内容部分，也就是说LESS是安在node里而不是安在phpstorm里作为phpstorm的一个插件。既然这样LESS编译CSS其实是可以独立工作的，举一个例子通过命令行进行手动编译。

开启cmd 键入一下两个命令

cd C:\Program Files\nodejs\node_modules\npm\node_modules\.bin

lessc E:\Desktop\LESS\test.less > E:\Desktop\LESS\test.css

即可完成对test.less编译工作。