我是 vscode 和 grunt/gulp 框架的新手,我想知道,是否有可能的方法让您的任务执行某些任务(比如转换一些文件,缩小一些图像等)然后访问 vscode 并运行 chrome 调试器?
任何建议我如何才能做到这一点。
最佳答案
这完全取决于你的意思。很容易完成以下工作流程。
{
"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"
]
}
}
如果您需要有关必要的 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"));
}
正如我写的那样,您通过 ctr-shift-p 启动任务“ sync ”:运行任务并选择 同步
然后 - 假设您安装了 chrome 调试器扩展程序 - 通过调试图标启动它:从下拉菜单中选择“Chrome : Launch with sourcemaps”:并运行它(下拉菜单左侧的小绿色箭头)。
祝你好运。
[编辑从这里开始]。
自从我在 2016 年写了这个答案以来,vscode 增加了使用 一次启动多个任务的能力。化合物 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“同步”任务,然后在 Debug模式下启动 Chrome。
当我使用它时,我有
open: false,
在 browserSync 选项中,因此它不会打开额外的默认浏览器窗口(除了即将启动的 chrome)。
关于google-chrome - 运行 vscode chrome 调试器扩展的 vscode gulp/grunt 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40045078/