如何使vscode执行与ng服务相同的构建?

时间:2017-05-10 12:08:28

标签: typescript visual-studio-code angular-cli vscode-settings vscode-tasks

我正在用angular-cli和vscode开始我的第一个项目,一切都很膨胀。我可以运行服务器-o并弹出我的webapp!但是,有时候我知道我会做很多改变,所以我不希望它一直在运行,我想在vscode中进行构建,它完全模仿了ng的构建。做。我知道我必须在tasks.json文件中创建一个构建任务,但我不知道是什么驱动了ng的设置,所以我可以完全模仿该构建。谢谢!

1 个答案:

答案 0 :(得分:1)

您的package.json应该包含以下部分

    "scripts": {
    "ng": "ng",
    "start": "ng serve --delete-output-path=false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"}

这些是您要使用的ng脚本。从VS Code任务中调用它们 只需编辑您的tasks.json即可包含

{
    "taskName": "serve",
    "command": "npm start",
    "type": "shell",
    "problemMatcher": "$tsc"
},
{
    "taskName": "open -- -o",
    "command": "npm start",
    "type": "shell",
    "problemMatcher": "$tsc"
},
{
    "taskName": "lint",
    "command": "npm run lint",
    "type": "shell",
    "problemMatcher": "$tsc"
},
{
    "taskName": "e2e",
    "command": "npm run e2e",
    "type": "shell",
    "problemMatcher": "$tsc"
}

除了调试角度,您还可以将以下内容添加到launch.json

{ "name": "npm start",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceRoot}"
},
{
  "name": "ng test",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:9876/debug.html",
  "webRoot": "${workspaceRoot}"
},
{
  "name": "ng e2e",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
  "protocol": "inspector",
  "args": ["${workspaceRoot}/protractor.conf.js"]
}