vpode gulp/grunt script chạy vscode mở rộng trình gỡ lỗi chrome

Question

Tôi mới làm quen với khung công tác vscode và grunt/gulp và tôi đã tự hỏi, nếu có một cách có thể cho nhiệm vụ của bạn thực hiện một số tác vụ (ví dụ: hình ảnh vv) và sau đó truy cập vscode và chạy trình gỡ lỗi chrome?

Bất kỳ lời khuyên nào về cách tôi có thể thực hiện điều đó.

Answer 1

Điều đó tùy thuộc vào ý bạn. Nó rất dễ dàng để thực hiện các công việc sau đây.

1. Bắt đầu tác vụ (như browserSync) xem tệp của bạn thay đổi và khởi động máy chủ.

2. Bắt đầu kéo dài debugger chrome thông qua một lệnh "ra mắt" trong .vscode/launch.json kết nối đến cùng url bắt đầu ở bước 1. Một cái gì đó như

   { 
       "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 của bạn sẽ dừng lại ở breakpoint của bạn và có thể gỡ bỏ ngay bây giờ.

4. Thực hiện thay đổi đối với js của bạn và (thông qua trình xem tác vụ gulp/grunt) của bạn sẽ được cập nhật trong trình duyệt chrome và vẫn có thể gỡ lỗi như trước mà không cần bạn tải lại theo cách thủ công.

Nếu bạn cần trợ giúp về nhiệm vụ cần thiết của gulp, hãy cho tôi biết. Nhưng đây là một ví dụ gulp.js mã (Tôi đang sử dụng gulp4.0 ở đây, nó sẽ không làm việc trong 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")); 
} 

Như tôi đã viết nó, bạn bắt đầu nhiệm vụ "sync" bởi ctr-shift-p: chạy tác vụ và chọn sync

Sau đó - giả sử bạn có phần mở rộng debugger chrome cài đặt - ra mắt rằng thông qua biểu tượng gỡ lỗi: chọn "Chrome: Launch với sourcemaps" từ trình đơn thả xuống: và chạy nó (với mũi tên nhỏ màu xanh ở bên trái của trình đơn thả xuống).

Chúc may mắn.

[CHỈNH SỬA bắt đầu tại đây].

Kể từ khi tôi đã viết câu trả lời này năm 2016, vscode đã thêm khả năng để khởi động nhiều nhiệm vụ cùng một lúc với các hợp chất then chốt.

{ 
    "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" 
      ] 
     } 
} 

bây giờ sẽ chạy tác vụ "đồng bộ hóa" gulp trước rồi khởi chạy Chrome ở chế độ gỡ lỗi.

Khi tôi sử dụng này, tôi có

open: false, 

trong các tùy chọn browserSync vì vậy nó không mở một cửa sổ trình duyệt mặc định bổ sung (ngoài chrome mà sắp được tung ra).