运行vscode chrome调试器扩展的vscode gulp / grunt脚本 [英] vscode gulp / grunt script running vscode chrome debugger extension
问题描述
我是vscode和grunt / gulp框架的新手，我想知道，如果您的任务有一个可能的方式来完成某项任务（让我们说一些文件，然后缩小一些图片等），然后访问vscode并运行铬调试器？
任何建议我怎么能做到这一点。
这完全取决于你的意思。您可以轻松完成以下工作流程。
- 开始一个任务（如browserSync），用于监视文件的变化并启动服务器。 li>
-
通过.vscode / launch.json中的launch命令启动chrome调试器扩展，该命令连接到在步骤1中启动的相同url。
{
版本：0.1.0，
配置：[
{
name：Chrome：启动时使用sourcemaps，
type：chrome，
request：launch，
url：http：// localhost ：3000，
webRoot：$ {workspaceRoot}，
sourceMaps：true，
runtimeArgs：[
--remote-debugging-port = 9222
}
}
-
-
- 改变你的js和（通过你的gulp / grunt任务监视器）它将在Chrome浏览器中更新，并且仍然可以像以前一样进行调试，而无需手动重新加载。 如果您需要帮助与必要的吞咽任务让我知道。但是这里有一个例子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）;
函数serve（完成）{
browserSync.init（{
服务器：{
baseDir：./，
index：home.html
}，
ghostMode：false
}）;
done（）;
}
函数重载（完成）{
browserSync.reload（）;
done（）;
}
var paths = {
styles：{
src：./scss/*.scss，
dest：./css
，
脚本：{
src：./js/*.js，
dest：./js
}
};
函数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）;
函数sass2css（）{
return gulp.src（./ scss / *。scss）
.pipe（缓存（移除scss缓存））
// .pipe（sourcemaps.init（））
.pipe（sass（）。on（error，sass.logError））
// .pipe（sourcemaps.write（。 / css / sourceMaps））
.pipe（gulp.dest（./ css））;
函数processJS（）{
return gulp.src（./ js / *。js）
.pipe（sourcemaps.init（））
// .pipe（concat（concat.js））
// .pipe（gulp.dest（./ concats /））
// .pipe（rename（ {后缀：.min}））
// .pipe（uglify（））
.pipe（sourcemaps.write（./ maps））
// .pipe gulp.dest（ ./ JS））;
}
正如我写的那样，您将开始执行 sync 通过ctr-shift-p：运行任务并选择同步
然后 - 假设您安装了Chrome调试器扩展程序 - 启动通过调试图标：从下拉菜单中选择Chrome：Launch with sourcemaps，然后运行它（使用下拉菜单左侧的绿色小箭头）。
祝你好运。
。
自从我写了这个答案2016，vscode has添加了使用 化合物 键同时启动多个任务的功能。
<$ c $
version：0.1.0，
compounds：[
{
name：Start server and chrome debugger，
配置：[Gulp同步，Chrome：启动时使用sourcemaps]
}
]，
配置：[
{
type：点头e，
request：launch，
name：Gulp sync，
program：$ {workspaceFolder} / node_modules / gulp / bin / gulp。 js，
args：[
sync
]
}，
{
name：Chrome：Launch with sourcemaps ，
//使用或不使用preLaunchTask
type：chrome，
request：launch，
url：http：// localhost ：3000，
webRoot：$ {workspaceRoot}，
sourceMaps：true，
runtimeArgs：[
--remote -debugging-port = 9222
}
}
现在先运行gulp同步任务，然后以调试模式启动Chrome。
当我使用这个时，我有
$ b在浏览器同步中$ b打开：false，
选项，所以它不会打开一个另外的默认浏览器窗口（除了将要启动的chrome外）。
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.
- 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" ] } }Your js will stop at your breakpoints and be debuggable now.
- Make a change to your js and (via your gulp/grunt task watcher) it will be updated in the chrome browser and still be debuggable as before with no need for you to manually reload.
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")); }As I have written it, you start the task "sync" by ctr-shift-p : run task and chose sync
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).
Good luck.
[EDIT starts here].
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" ] } }will now run the gulp "sync" task first and then launch Chrome in debug mode.
When I use this I have
open: false,in the browserSync options so it doesn't open an additional default browser window (besides chrome which is about to be launched).
这篇关于运行vscode chrome调试器扩展的vscode gulp / grunt脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
