Question

我是vscode和grunt / gulp框架的新手，我想知道，如果有任何可能的方法让你的任务完成一些任务（比如说一些文件，缩小一些图像等），然后访问vscode并运行chrome调试器？

任何建议我如何才能做到这一点。

Answer 1

这完全取决于你的意思。很容易完成以下工作流程。

启动监视文件更改并启动服务器的任务（如browserSync）。

通过＆＃34;启动＆＃34>启动Chrome调试器扩展程序连接到同一个url的.vscode / launch.json命令在步骤1中启动。类似

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Chrome : Launch with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "runtimeArgs": [
            "--remote-debugging-port=9222"
            ]
        }
}

您的js将在您的断点处停止并且现在可以调试。
对您的js进行更改并（通过您的gulp / grunt任务监视器）它将在Chrome浏览器中更新，并且仍可像以前一样进行调试，无需手动重新加载。

如果您需要有关必要的gulp任务的帮助，请告诉我。但是这里有一个示例gulp.js代码（我在这里使用 gulp4.0 ，不在3.x中工作!!）：

var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
// var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
// var rename = require("gulp-rename");
var autoprefixer = require("gulp-autoprefixer");
var cleanCSS = require("gulp-clean-css");
var sourcemaps = require("gulp-sourcemaps");
var cached = require("gulp-cached");
var remember = require("gulp-remember");


function serve(done) {

  browserSync.init({
    server: {
      baseDir: "./",
      index: "home.html"
    },
    ghostMode: false
  });
  done();
}

function reload(done) {
  browserSync.reload();
  done();
}

var paths = {
  styles: {
    src: "./scss/*.scss",
    dest: "./css"
  },
  scripts: {
    src: "./js/*.js",
    dest: "./js"
  }
};

function watch() {
  gulp.watch(paths.scripts.src, gulp.series(processJS, reload));
  gulp.watch(paths.styles.src, gulp.series(sass2css, reload));
  gulp.watch("./*.html").on("change", browserSync.reload);
}

var build = gulp.series(serve, watch);

gulp.task("sync", build);

function sass2css() {
  return gulp.src("./scss/*.scss")
    .pipe(cached("removing scss cached"))
    // .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    // .pipe(sourcemaps.write("./css/sourceMaps"))
    .pipe(gulp.dest("./css"));
}

function processJS() {
  return gulp.src("./js/*.js")
    .pipe(sourcemaps.init())
    // .pipe(concat("concat.js"))
    // .pipe(gulp.dest("./concats/"))
    // .pipe(rename({ suffix: ".min" }))
    // .pipe(uglify())
    .pipe(sourcemaps.write("./maps"))
    // .pipe(gulp.dest("./js"));
}

正如我所写，你开始任务＆＃34; 同步＆＃34;通过ctr-shift-p：运行任务并选择同步

然后 - 假设你安装了chrome调试器扩展程序 - 通过调试图标启动它：选择＆＃34; Chrome：使用源映射启动＆＃34;从下拉菜单中选择并运行它（使用下拉菜单左侧的绿色小箭头）。

[编辑从这里开始]。

自从我撰写此答案2016以来，vscode已添加了使用 化合物 键一次启动多个任务的功能。

{
    "version": "0.1.0",
    "compounds": [
        {
            "name": "Start server and chrome debugger",
            "configurations": ["Gulp sync", "Chrome : Launch with sourcemaps" ]
        }
    ],
    "configurations": [

        {
            "type": "node",
            "request": "launch",
            "name": "Gulp sync",
            "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
            "args": [
                "sync"
            ]
        },
        {
            "name": "Chrome : Launch with sourcemaps",
            // works with or without preLaunchTask
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}",

            "sourceMaps": true,
            "runtimeArgs": [
              "--remote-debugging-port=9222"
            ]
        }
}

现在将运行gulp＆＃34; sync＆＃34;首先执行任务，然后以调试模式启动Chrome。

当我使用它时，我有

 open: false,

在browserSync选项中，因此它不会打开另一个默认浏览器窗口（除了即将启动的chrome）。

运行vscode chrome调试器扩展的vscode gulp / grunt脚本

1 个答案: