减少PHPStorm中的Filewatcher编译器

问题描述

当尝试使用 PHPStorm File watcher 将.less文件编译为.css时，我做错了什么?

what I'am doing wrong when trying to compile the .less files into .css with PHPStorm File watcher ?

以下是屏幕截图，(请打开此链接以查看完整的图片):

Here is the screenshot, (pls open THIS LINK to see the full size of the image):

在安装NodeJS之后，我安装了npm install -g less.在Windows OS中将cmd.exe-命令行工具与以下命令配合使用时，编译器lessc可以正常工作:

I installed npm install -g less, after getting installed NodeJS. It works fine the compiler lessc when using cmd.exe - Command Line Tool in Windows OS with this command:

lessc custom.less custom.css，但它不会在Filewatcher的PHPStorm内部执行任何操作.

lessc custom.less custom.css, but it wont do anything inside PHPStorm in Filewatcher.

有什么提示我应该纠正的吗?

Any clue what I should correct, pls ?

推荐答案

对于那些想在自己的IDE PHPStorm中配置LESS自动编译器的人，您可以采用以下方式:

For those who want to configure LESS auto compiler inside their IDE PHPStorm, you can do it in that way:

1. 下载并安装 Node.js
2. 打开终端/外壳/命令行，对于Windows环境，为cmd.exe
3. 在命令行终端中，键入npm install -g less，然后等待LESS下载并安装.
4. 在PHPStorm中打开设置"窗口:文件>设置(CTRL + ALT + S)
5. 导航到文件监视程序(或在设置"窗口中搜索)
6. 单击设置"对话框右侧的 + ，以创建一个新的File Watcher并对其进行配置，如下图所示:
   
   这是上一张图片的文件夹结构的样子:
   
7. 保存并测试它，每次在.less文件中键入内容时，它将自动编译为先前在File Watcher的设置对话框中定义的.css.
   要取消缺少源文件的文件，请创建一个如图所示的template.less，然后在对样式进行任何样式设置之前将源文件子加载到其中.

1. Download and install Node.js
2. Open Terminal/Shell/Command line, cmd.exe for Windows Environment
3. Inside Command line terminal, type npm install -g less and wait for LESS to be downloaded and installed.
4. In PHPStorm open Settings window: File > Settings (CTRL+ALT+S)
5. Navigate to File Watchers (or search for it inside SETTINGS Window)
6. Click on + on the right side of the Settings dialog to create a new File Watcher and configure it as shown on picture:
   
   And this is how your folder structure should look like for the settings on the previous picture:
   
7. Save it and test it, each time you type something inside the .less file, it will be automatically compiled into .css you've defined before in File Watcher's setting dialog.
   To untouch the source less files, create a template.less like shown in picture and subload the source files there before doing styling anything.

/*!
 * Your commented code which wouldn't be removed in compiled .css because of "!" mark
 */
 /*
  * This comment will be removed in compiled .css file because of no "!" after "/*"
  */

// Core source files of Twitter's Bootstrap
@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

// Core source file of Font Awesome Icons
@import "font-awesome/font-awesome";

// Connected plugins
@import "plugins/datepicker";
@import "plugins/redactor";

/*!
 * General template styles below
 */

/* -------------------------------------------------------------- */
/**** PRECONFIG, OVERRIDES, VARIABLES, TYPOGRAPHY ****/
/* -------------------------------------------------------------- */
// VARIABLES.LESS Override
//---------------------------------------------------------------
// Colors
@whiteSmoke:            #f5f5f5;

// Typo
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

这篇关于减少PHPStorm中的Filewatcher编译器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！