javascript - 如何在 PHPStorm (WebStorm) 中调试 grunt

Question

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

Storm 中有 Node.js 支持，但如果我想调试 grunt 任务，例如当文件更改并且 watch 任务发出它时，我不确定如何配置调试设置。

Answer 1

Petr 的帖子是正确的，但我添加了一些图片以使 PHPStorm 或 WebStorm 新手更清楚这一点

---

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

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

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

命名GRUNT 或任何你喜欢的名字

工作目录C:\GRUNT-TASKPATH（或安装了 grunt 任务源的任何位置），其中包含源，还应包含 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 2

我使用 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) { ... }，然后单击工具栏上的“调试”按钮 - 断点按预期工作！

（如果您不知道 PhpStorm 中的 Run/Debug 配置在哪里阅读： http: //www.jetbrains.com/phpstorm/webhelp/running-and-debugging-node-js.html）

Answer 3

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

我的设置是：

A）“节点路径”：我在 /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 ) “Node App JS 文件的路径”：我输入了要执行的 grunt 任务的名称，例如 default

通过这个设置，我可以将 PhpStorm 的调试器作为普通的 NodeJS 应用程序执行，这样我就可以在需要的地方设置断点。