vscode的調(diào)試功能非常強(qiáng)大，豐富的插件使得他能讓各種語言在其上運(yùn)行，這次介紹一下如何在vscode上調(diào)試 gulp。

為此，我們需要為vscode添加啟動(dòng)配置，這通過在項(xiàng)目的根目錄中添加一個(gè)名為 .vscode 的文件夾，并添加名為 launch.json 的文件，或者在調(diào)試菜單中添加配置。

配置如下：

{
    "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 是為這個(gè)配置賜的名號(hào)，program 指向項(xiàng)目目錄下 gulp 所在位置，args 為 gulp 中配置的 task 也就是你想要調(diào)試的 task，cwd 指向的是 gulpfile.js 所在路徑。

配置完成后按 F5 進(jìn)入調(diào)試模塊，選擇調(diào)試配置運(yùn)行即可。

調(diào)試gulp

其中多數(shù)配置非必須，最簡運(yùn)行配置如下。

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

gulp 開發(fā)中目錄路徑和活動(dòng)對(duì)象都是較為令人苦惱的，通過vscode進(jìn)行調(diào)試能方便很多，雖然webstorm在已經(jīng)集成gulp調(diào)試，并且讀取了所有 task 更佳方便，然而他卡??！