vscode gulp/grunt 脚本运行 vscode chrome 调试器扩展 [英] vscode gulp / grunt script running vscode chrome debugger extension
问题描述
我是 vscode 和 grunt/gulp 框架的新手,我想知道,是否有可能的方法让您的任务执行某些任务(比如转换一些文件,缩小一些图像等)然后访问 vscode 并运行铬调试器?
I am new to vscode and grunt / gulp frameworks and I was wondering, if there is a possible way for your task to do some task ( let say transpile some files, minify some images etc. ) and then access vscode and run the chrome debugger ?
任何建议我如何做到这一点.
Any advice how I could accomplish that.
推荐答案
这完全取决于您的意思.很容易完成以下工作流程.
It depends on exactly what you mean. It is easy to accomplish the following workflow.
- 启动一项任务(如 browserSync),以观察您的文件更改并启动服务器.
通过 .vscode/launch.json 中的启动"命令启动 chrome 调试器扩展,该命令连接到在步骤 1 中启动的同一个 URL.类似
- Start a task (like browserSync) that watches your file changes and starts a server.
Start the chrome debugger extension via a "launch" command in .vscode/launch.json that connects to that same url started in step 1. Something like
{
"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 将在您的断点处停止并且现在可以调试了.
Your js will stop at your breakpoints and be debuggable now.
如果您需要有关必要的 gulp 任务的帮助,请告诉我.但这里有一个 gulp.js 代码示例(我在这里使用 gulp4.0,它在 3.x 中不能工作!!):
If you need help with the necessary gulp task let me know. But here is an example gulp.js code (I am using gulp4.0 here, it will not work in 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"));
}
正如我所写的,您通过 ctr-shift-p 启动任务sync":运行任务并选择 sync
As I have written it, you start the task "sync" by ctr-shift-p : run task and chose sync
然后 - 假设您安装了 chrome 调试器扩展程序 - 通过调试图标启动它:从下拉菜单中选择Chrome : Launch with sourcemaps":并运行它(下拉菜单左侧的小绿色箭头).
Then - assuming you have the chrome debugger extension installed - launch that via the debug icon : chose "Chrome : Launch with sourcemaps" from the dropdown menu : and run it (with the little green arrow to the left of the dropdown menu).
祝你好运.
.
自从我在 2016 年写下这个答案以来,vscode 增加了使用 compounds 键一次启动多个任务的能力.
Since I wrote this answer 2016, vscode has added the ability to launch multiple tasks at once with the compounds key.
{
"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同步"任务,然后在调试模式下启动 Chrome.
will now run the gulp "sync" task first and then launch Chrome in debug mode.
当我使用这个时,我有
open: false,
在 browserSync 选项中,因此它不会打开额外的默认浏览器窗口(除了即将启动的 chrome).
in the browserSync options so it doesn't open an additional default browser window (besides chrome which is about to be launched).
这篇关于vscode gulp/grunt 脚本运行 vscode chrome 调试器扩展的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!