vscode调试gulp设置

vscode的调试功能非常强大，丰富的插件使得他能让各种语言在其上运行，这次介绍一下如何在vscode上调试 gulp。

为此，我们需要为vscode添加启动配置，这通过在项目的根目录中添加一个名为 .vscode 的文件夹，并添加名为 launch.json 的文件，或者在调试菜单中添加配置。

配置如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Gulp",
            "program": "${workspaceRoot}/buildNew/node_modules/gulp/bin/gulp.js",
            "stopOnEntry": true,
            "args": [
              "buildAddr"  
            ],
            "cwd": "${workspaceRoot}/buildNew/",
            "outFiles": [],
            "sourceMaps": true,
            "runtimeExecutable": null,
            "env": {
                
            }
        }
    ]
}

其中 type 与 request 固定配置，name 是为这个配置赐的名号，program 指向项目目录下 gulp 所在位置，args 为 gulp 中配置的 task 也就是你想要调试的 task，cwd 指向的是 gulpfile.js 所在路径。

配置完成后按 F5 进入调试模块，选择调试配置运行即可。

调试gulp

其中多数配置非必须，最简运行配置如下。

{
    "type": "node",
    "request": "launch",
    "name": "Gulp buildAddr",
    "program": "${workspaceRoot}/buildNew/node_modules/gulp/bin/gulp.js",
    "cwd": "${workspaceRoot}/buildNew/",
    "args": [
        "buildAddr"
    ]
}

gulp 开发中目录路径和活动对象都是较为令人苦恼的，通过vscode进行调试能方便很多，虽然webstorm在已经集成gulp调试，并且读取了所有 task 更佳方便，然而他卡啊！