vscode一飲而盡/咕嚕腳本運行vscode鉻調試器擴展

Question

我是新來vscode咕嚕/一飲而盡框架，我想知道，如果有適合您的任務做一些任務（讓說transpile一些文件，運行如下的一些可能的方式圖像等），然後訪問vscode並運行chrome調試器？

任何意見，我怎麼可能實現這一目標。

Answer 1

這取決於你的意思。很容易完成以下工作流程。

1. 啓動一個任務（如browserSync），用於監視您的文件更改並啓動服務器。

2. 通過在.vscode/A「發射」命令launch.json連接到相同的URL，啓動鉻調試器擴展在步驟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" 
         ] 
        } 
   } 
   

3. 你的JS將在您的斷點處停止並且現在可以調試。

4. 進行更改到你的JS和（通過你的一口/咕嚕任務觀察者），它會在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"); 


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鍵：運行任務，並選擇同步

然後 - 假設你已經安裝了鍍鉻調試器擴展 - 推出即通過調試圖標：選擇「瀏覽器：啓動與sourcemaps」從下拉菜單中選擇：並運行它（使用下拉菜單左側的綠色小箭頭）。

祝你好運。

[編輯開始]。

自從我寫這個答案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" 
      ] 
     } 
} 

現在將首先運行吞氣「同步」任務，然後在調試模式下啓動Chrome。

當我使用這個我有

open: false, 

在browserSync選項

所以它不會打開一個額外的默認瀏覽器窗口中（除了將推出Chrome大約是）。