Question

一直在使用visual studio代码，我正在尝试使用构建的调试器。我找到了例子，并试图设置它。我已成功完成gulp服务任务设置，并使用命令

正确运行

⇧⌘B

不是调试器选项卡中的实际播放按钮。我发现使用chrome扩展进行调试的示例不包括grunt或gulp自动化任务。是否可以使用gulp任务和调试器？

launch.json

stackArray[top--];

tasks.json

    {
    "version": "0.2.0",
    "configurations": [
        {
            "request": "launch",
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "node gulp.js ..",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "${workspaceRoot}./node_modules/gulp/bin/gulp.js",
            // Automatically stop program after launch.
            "stopOnEntry": true,
            // Command line arguments passed to the program.
            "args": [
                "--extensionDevelopmentPath=${workspaceRoot}"
            ],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": "${workspaceRoot}.",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": "${execPath}",
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": {},
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": "${workspaceRoot}out"
        }
    ]
}

gulp.config.js

    {
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "serve",
            "args": [],
            "isBuildCommand": true,
            "isWatching": true,
            "problemMatcher": [
                "$lessCompile",
                "$tsc",
                "$jshint"
            ]
        }
    ]
}

gulpfile.js

    module.exports = function($, usehtml) {

  // distribution folder
  var dist = 'app/';
  var source = 'src/'; // for abs path construction

  var markupEngine = usehtml ? 'html' : 'jade';
  var markupExt = '.' + markupEngine;

  // main source folders
  var srcLESS = source + 'less/';
  var srcSCSS = source + 'scss/';
  var srcHTML = source + markupEngine + '/';
  var srcJS   = source + 'js/';


  // Shared config object
  var config = {
    // ---
    // Paths
    // ---

    dist:    dist,
    distCSS: dist + 'css',
    distJS:  dist + 'js',
    source:  source,
    srcLESS: srcLESS,
    srcSCSS: srcSCSS,
    srcHTML: srcHTML,
    srcJS:   srcJS,
    html: {
      index: [srcHTML + 'index' + markupExt],
      views: [
        srcHTML + '**/*' + markupExt,
        '!'+srcHTML + 'index' + markupExt
      ],
      templates: [
        srcHTML + 'views/sidebar/*' + markupExt,
        srcHTML + 'views/navbar/*' + markupExt,
        srcHTML + 'views/layers/*' + markupExt,
        srcHTML + 'views/filters/*' + markupExt,
        srcHTML + 'views/modals/*' + markupExt
      ],
      all: [srcHTML + '**/*' + markupExt]
    },
    less: {
      styles: [srcLESS + 'styles.less'],
      watch: [srcLESS + 'app/**/*.less'],
      bootstrap: [srcLESS + 'bootstrap/bootstrap.less']
    },
    scss: {
      styles: [srcSCSS + 'styles.scss'],
      watch: [srcSCSS + 'app/**/*.scss'],
      bootstrap: [srcSCSS + 'bootstrap.scss']
    },
    js: [srcJS + 'app.module.js', srcJS + 'modules/**/*.js', srcJS + 'custom/**/*.js'],

    // ---
    // Plugins
    // ---

    plato: {
      js: srcJS + '**/*.js'
    },
    report: './report/',
    tplcache: {
      file: 'templates.js',
      opts: {
        standalone: false,
        root: 'templates',
        module: 'insight'
      }
    },
    webserver: {
      webroot:          '.',
      host:             'localhost',
      port:             '3000',
      livereload:       true,
      directoryListing: false
    },
    prettify: {
      indent_char: ' ',
      indent_size: 3,
      unformatted: ['a', 'sub', 'sup', 'b', 'i', 'u']
    },
    usemin: {
      path: '.',
      css: [$.minifyCss({ processImport: false }), 'concat', $.rev()],
      // html: [$.minifyHtml({empty: true})],
      vendor: [$.uglify( {preserveComments:'some'} ), $.rev()],
      js: [$.ngAnnotate(), $.uglify( {preserveComments:'some'} ), $.rev()]
    }
  };

  // scripts to check with jshint
  config.lintJs =  [].concat(config.js, config.distJS);

  return config;

};

Answer 1

您的启动配置中似乎存在多个错误。

配置中的某些路径错误。例如：

"${workspaceRoot}./node_modules/gulp/bin/gulp.js"

应该是

"${workspaceRoot}/node_modules/gulp/bin/gulp.js"

${workspaceRoot}是占位符，表示工作区的绝对路径。您不能在launch.json中使用./[relativepath]之类的相对路径语法。只需将.替换为${workspaceRoot}。

如果您在启动配置"type": "node"中使用"program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js"，则应指向节点应用程序的索引文件，而不是gulp可执行文件。

在您的gulp文件中，您似乎正在尝试调试网站。在这种情况下，您应该使用Debugger for Chrome或Debugger for Edge vscode扩展

如何设置visual studio代码

1 个答案: