Ubuntu 下配置 PhpStorm 自动编译 LESS 生成css和source-map

tags： IDE PhpStorm LESS

---

source-map可以帮助你找到css样式在LESS文件中的位置（使用Chrome），详见https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN

安装node.js环境

首先，LESS的编译需要node.js环境，但是在Ubuntu的软件源中的nodejs版本比较旧，所以我们需要到项目主页下载最新版本，方便起见，我们选择已经编译好的版本。
下载下来的nodejs二进制版本是一个文件夹，这个文件夹将作为nodejs环境的安装目录，其中的bin/目录下有可以直接运行的node和npm程序。我们可以将该目录加入PATH或者在/usr/bin/或/usr/local/bin/下创建一个符号链接到这两个程序，这样就可以通过命令行来运行nodejs和npm了。

安装完成后我们可以通过node -v来检查是否正确配置。如果显示版本号，则已配置好，否则应该检查node程序是否在PATH下。npm同理。

安装LESS编译器

配置好nodejs和npm后，我们使用npm来安装LESS编译环境。使用sudo可避免一些权限不足造成的问题。

sudo npm install less

安装完成后将在之前node.js的文件夹中bin/目录下将会有产生一个node_modules/目录，LESS的编译器lessc就存放在这里，我们的新安装的node模块都会存放在这个地方。
接着用之前的方法将lessc加到PATH中，用lessc -v检查编译器版本。

配置PhpStorm

在PhpStorm中新建一个LESS文件，PhpStorm将提示你添加FileWatcher，或者通过Settings->Tools->File Watcher进入File Watcher界面添加一个LESS的File Watcher

添加界面如下：

我们主要修改的是Arguments和Output paths to refresh。

• Arguments: --no-color --source-map=../css/$FileNameWithoutExtension$.css.map $FileName$
• Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css: $FileParentDir$/css/$FileNameWithoutExtension$.css.map

最终生成的目录结构：

好了，经过这样的设置就能使用PhpStorm自动编译LESS了。