Npm 如何设置VisualStudio代码

一直在使用VisualStudio代码，我正在尝试使用构建的调试器。我已经找到了一些例子，并试图建立它。我已经成功地获得了gulp serve任务设置，并且它使用命令正确运行

⇧⌘B

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

launch.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"
        }
    ]
}

tasks.json

    {
    // 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"
            ]
        }
    ]
}

gulp.config.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;

};

gulpfile.js

    var argv = require('yargs').argv;
var usehtml = true;
var usertl = argv.usertl;
var usescss = argv.usescss;

var gulp = require('gulp'),
    $ = require('gulp-load-plugins')(),
    gutil = require('gulp-util'),
    gulpsync = require('gulp-sync')(gulp),
    path = require('path'),
    glob = require('glob'),
    del = require('del'),
    runSequence = require('run-sequence'),
    config = require('./gulp.config')($, usehtml);


// production mode
var isProduction = false;

//---------------
// TASKS
//---------------

// APP LESS
gulp.task('styles', function () {
    log('Compiling styles to CSS..');
    var stylesSrc = usescss ? config.scss.styles : config.less.styles;
    return gulp.src(stylesSrc)
        .pipe(isProduction ? gutil.noop() : $.sourcemaps.init())
        .pipe(usescss ? $.sass() : $.less())
        .on("error", handleError)
        .pipe($.if(usertl, $.rtlcss()))
        .pipe(isProduction ? $.minifyCss({processImport: false}) : gutil.noop())
        .pipe(isProduction ? gutil.noop() : $.sourcemaps.write())
        .pipe(gulp.dest(config.distCSS));
});

// BOOSTRAP
gulp.task('bootstrap', function () {
    log('Compiling Bootstrap..');
    var bsSrc = usescss ? config.scss.bootstrap : config.less.bootstrap;
    return gulp.src(bsSrc)
        .pipe(isProduction ? gutil.noop() : $.sourcemaps.init())
        .pipe(usescss ? $.sass() : $.less())
        .on("error", handleError)
        .pipe($.if(usertl, $.rtlcss()))
        .pipe(isProduction ? $.minifyCss({processImport: false}) : gutil.noop())
        .pipe(isProduction ? gutil.noop() : $.sourcemaps.write())
        .pipe(gulp.dest(config.distCSS));
});

// HTML
gulp.task('markup', ['index', 'views']);

gulp.task('views', buildMarkup(config.html.views, config.dist));

gulp.task('index', ['templatecache'], buildMarkup(config.html.index, '.', false, true));

gulp.task('templatecache', ['clean-scripts'], buildMarkup(config.html.templates, config.dist + 'js', true));


// SERVER
// -----------------------------------

gulp.task('webserver', function () {
    log('Starting web server.. ');
    return gulp.src(config.webserver.webroot)
        .pipe($.webserver(config.webserver));

});

//---------------
// WATCH
//---------------

// Rerun the task when a file changes
gulp.task('watch', function () {
    log('Starting watch with live reload ...');

    $.livereload.listen();

    if (usescss) gulp.watch([config.scss.watch, config.scss.styles], ['styles']);
    else        gulp.watch([config.less.watch, config.less.styles], ['styles']);

    if (usescss) gulp.watch(config.scss.bootstrap, ['bootstrap']);
    else        gulp.watch(config.less.bootstrap, ['bootstrap']);

    gulp.watch(config.html.all, ['markup']);
    gulp.watch(config.html.templates, ['templatecache']);

    gulp
        .watch([].concat(config.less.watch, config.html.views, config.html.templates, config.js))
        .on('change', function (event) {
            setTimeout(function () {
                $.livereload.changed(event.path);
            }, 1400);
        });

});

/**
 * Clean
 */
gulp.task('clean', ['clean-scripts', 'clean-styles', 'clean-markup']);

gulp.task('clean-scripts', function (cb) {
    var js = config.distJS + '/*{js,map}';
    clean(js, cb);
});

gulp.task('clean-styles', function (cb) {
    var css = config.distCSS + '/*{css,map}';
    clean(css, cb);
});

gulp.task('clean-markup', function (cb) {
    var html = ['index.html', config.dist + 'views/'];
    clean(html, cb);
});


gulp.task('clean-build', function (cb) {
    log('Removing development assets');
    var delFiles = [
        config.distJS + '/' + config.tplcache.file,
        config.distCSS + '/bootstrap.css',
        config.distCSS + '/styles.css'
    ];
    clean(delFiles, cb);
});


/**
 * vet the code and create coverage report
 */
gulp.task('lint', function () {
    log('Analyzing source with JSHint');

    return gulp
        .src(config.lintJs)
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
        .pipe($.jshint.reporter('fail'));
});

//---------------
// Visualizer report
//---------------
gulp.task('plato', function (done) {
    log('Analyzing source with Plato');
    log('Browse to /report/plato/index.html to see Plato results');

    startPlatoVisualizer(done);
});

//---------------
// MAIN TASKS
//---------------

// build for production
gulp.task('build', [], function (cb) {
    runSequence('clean', 'production', 'compile', 'clean-build', cb);
});

gulp.task('production', function () {
    isProduction = true;
});

// default (no minify, sourcemaps and watch)
gulp.task('default', function (callback) {
    runSequence('clean', 'compile', 'watch', 'done', callback);
}).task('done', done);

// serve development by default
gulp.task('serve', function (cb) {
    runSequence('default', 'webserver', cb);
});

// optional serve production
gulp.task('serve-build', function (cb) {
    runSequence('build', 'webserver', cb);
});

// run tasks without watch
gulp.task('compile', function (cb) {
    runSequence(
        'bootstrap',
        'styles',
        'templatecache',
        'markup',
        cb);
});


/////////////////

/**
 * Error handler
 */
function handleError(err) {
    console.log(err.toString());
    this.emit('end');
}

/**
 * Build html templates
 * @param  {string} src           source files folder
 * @param  {string} dst           target folder
 * @param  {boolean} useTplcache  Should generate angular template cache
 * @return {stream}
 */
function buildMarkup(src, dst, useTplcache, useMin) {

    return function () {
        log('Compiling HTML...');
        if (useTplcache) log('Creating AngularJS templateCache..');

        return gulp.src(src)
            .pipe(isProduction ? gutil.noop() : $.changed(dst, {extension: '.html'}))
            .pipe($.if(!usehtml, $.jade({
                    locals: {
                        scripts: glob.sync(config.source + 'js/**/*.js')
                    }
                })
                )
            )
            .on("error", handleError)
            .pipe($.htmlPrettify(config.prettify))
            // .pipe($.angularHtmlify())
            .pipe(isProduction && useMin ?
                $.usemin(config.usemin)
                : gutil.noop()
            )
            .pipe(useTplcache ?
                $.angularTemplatecache(config.tplcache.file, config.tplcache.opts)
                : gutil.noop()
            )
            .pipe(gulp.dest(dst))
            ;
    }
}

/**
 * Delete all files in a given path
 * @param  {Array}   path - array of paths to delete
 * @param  {Function} done - callback when complete
 */
function clean(path, done) {
    log('Cleaning: ' + $.util.colors.blue(path));
    del(path, done);
}

/**
 * Start Plato inspector and visualizer
 */
function startPlatoVisualizer(done) {
    log('Running Plato');

    var files = glob.sync(config.plato.js);
    var excludeFiles = /.*\.spec\.js/;
    var plato = require('plato');

    var options = {
        title: 'Plato Inspections Report',
        exclude: excludeFiles
    };
    var outputDir = config.report + 'plato/';

    plato.inspect(files, outputDir, options, platoCompleted);

    function platoCompleted(report) {
        var overview = plato.getOverviewReport(report);
        log(overview.summary);
        if (done) {
            done();
        }
    }
}

/**
 * Just to be polite :)
 */
function done() {
    setTimeout(function () { // it's more clear to show msg after all
        log('Done.. Watching code and reloading on changes..');
    }, 500);
};


/**
 * Standard log
 */

function log(msg) {
    var prefix = '*** ';
    gutil.log(prefix + msg);
}

---

您的启动配置中似乎有多个错误

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

"${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文件中，看起来您正在尝试调试一个网站。在这种情况下，您应该使用或vscode extension

调试

gulp

任务时遇到的错误是什么？您可以将问题约束到相关文件。您不需要包含

gulpfile.js

和

gulp.config.js

，因为它们正在工作。很抱歉响应太晚。当我在调试器选项卡中点击play时，我得到了这个错误。并且gulp模块已安装属性“program”不存在（'e:\Development\PilatesCachClient./node\u modules/gulp/bin/gulp.js'）。