如何在PHPStorm中调试grunt（WebStorm）

Question

有人在PHP Storm中调试grunt（例如事件监听器函数）是个好主意。

在风暴中有Node.js支持，但是我不知道如果我想调试grunt任务，例如当文件发生变化并且监视任务发出它时，如何配置调试设置。

Answer 1

我使用Windows 7.我发现当我在cmd中键入“grunt”时它实际上运行

node c:\Users\<username>\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

所以我进入了PhpStorm运行/调试配置Path to Node App JS File = c:\Users\<username>\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

现在我在module.exports = function (grunt) { ... }内放了一个断点，然后单击工具栏上的“Debug”按钮 - 断点按预期工作！

（如果您不知道PhpStorm中的运行/调试配置在何处阅读：http://www.jetbrains.com/phpstorm/webhelp/running-and-debugging-node-js.html）

Answer 2

Petr的帖子是正确的，但我正在添加一些图片，以使PHPStorm或WebStorm Newbies更清晰

---

  

1）从WEBSTORM主菜单：运行 - >编辑配置... 打开一个对话框

     

2）单击[+]图标，然后从下拉列表中选择Node.js条目（如果尚未选择）

  

3）这将打开一个Node.js模板，其中填写了基本字段。您需要添加以下字段名称，工作目录，Java脚本文件，应用程序参数

名称 GRUNT或您喜欢的任何内容

工作目录 C：\ GRUNT-TASKPATH（或安装了grunt任务的源），其中包含source，并且还应包含gruntfile.js

Javascript文件“C：\ Users \ USERNAME \ AppData \ Roaming \ npm \ node_modules \ grunt-cli \ bin \ grunt”这是grunt节点应用，在linux / mac上它将是在另一个目录

应用参数 TASKNAME 您要调试的grunt任务的名称

  

4）不要忘记应用刚才设置，然后按OK关闭对话框

     

5）打开应该在你的工作目录下的任务源（tasks / taskname.js）并设置一个断点

就是这样，您现在可以使用运行菜单中的GRUNT配置或工具栏中的下拉列表来运行或调试任务。

Answer 3

我正在使用Linux，我必须以奇怪的方式配置PhpStorm Run / Debug来运行或调试Grunt任务，可能是因为我在我的主文件夹中安装了Node而不是在/中有二进制文件的链接USR / bin中

我的设置是：

A）“Paht to Node”：我在/ home / ifraixedes / Apps / node / bin / node中设置了我的bin节点的路径 B）“节点参数”我设置了Grunt-cli脚本的路径，在我的例子中：/ home / ifraixedes / Apps / node / lib / node_modules / grunt-cli / bin / grunt C）“工作目录”：我输入了我想要执行的Gruntfile.js所在目录的路径 D）“节点应用程序JS文件的路径”：我输入了要执行的grunt任务的名称，例如默认

通过这些设置，我可以像通常的NodeJS应用程序一样执行PhpStorm的调试器，这样我就可以在任何需要的地方设置断点。