PhpStorm 使用 File Watchers 自动编译 less

综述

PhpStorm 可以使用 File Watchers 自动编译 Less，有了这个 IDE，妈妈再也不用担心我的 Less 编译了。下面说一下我的配置过程。 下面的例子以 Mac OS X 为例。

配置

1. 配置 npm

1

brew install npm

更多平台安装方式 npm

2. 安装 lessc

1

npm install less -g

安装完毕后查看安装路径

1

which lessc

Mac OS X 的结果是

1

/usr/local/bin/lessc

3. 配置 PhpStorm

打开 PhpStorm，Preferences->Tools->File Watchers 点击加号新增 Less Template，然后点击编辑按钮编辑，页面如下 其中需要配置两个地方

Program：

配置为 lessc 的路径，这边配置为 /usr/local/bin/lessc

Output paths to refresh：

1

$FileParentDir(less)$/css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css

在这里简单解释下这个路径的意思。

例如项目名为 project，less 文件我们放置在 project/public/less/manage/style.less $FileParentDir (less)$ 是获取 less 目录的路径，也就是 project/public $FileDirPathFromParent (less)$ 是获取 less 文件到 less 目录的路径，也就是 manage $FileNameWithoutExtension$ 是获取 less 文件不带后缀的名字，也就是 style 经过如上拼接，生成的内容为 project/public/css/manage/style.css

所以，不论我们的 less 文件如何放置，都可以生成相对路径的 css 文件。 配置完成之后，我们新建 less 目录，任意编辑一个 less 文件，都会在 css 目录下生成相应的文件。

简单配置

当然，如果你的 less 文件就直接在 less 目录下，可以简单配置以上的 Output Path 如下 ../css/$FileNameWithoutExtension$.css 这也是一种比较常用的配置方法。 如果目录结构简单，可以采取以上方式。

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/2491.html