Seeking to utilize Gulp for the development of my straightforward Typescript project that runs in the browser. When using gulp-typescript, it seems to insert modules.export into the generated js files, leading me to explore some examples involving browserify.
Currently, I have the following gulp.js file:
var gulp = require('gulp');
var del = require('del');
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var sourcemaps = require('gulp-sourcemaps');
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
gulp.task('clean', function () {
return del(['build/**/*']);
});
gulp.task("copy-html", function () {
return gulp.src("*.html")
.pipe(gulp.dest("build"));
});
gulp.task("copy-css", function () {
return gulp.src("src/*.css")
.pipe(gulp.dest("build"));
});
gulp.task("default", ["clean", "copy-html", "copy-css"], function () {
return browserify({
basedir: '.',
debug: true,
entries: ['src/main.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest("build"));
});
The above script generates bundle.js with embedded soucemaps. While debugging on Chrome works fine, I am encountering issues trying to utilize the vscode Chrome debugger plugin from here, as breakpoints are disabled.
This is how my launch.json looks:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/build/index.html",
"sourceMaps": true
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
I attempted to incorporate external source maps using gulp-sourcemaps from here, but encountered build errors whenever I tried adding .pipe(sourcemaps.init()) and .pipe(sourcemaps.write()) to the script.
Despite testing several suggestions, none seem to work (for instance, using outDir in launch.json results in the error Property ourDir is not allowed). Therefore, I am seeking guidance on integrating a debugger with Typescript in Chrome - a seemingly common scenario, yet proven challenging to implement successfully. My assumption is that the issue lies within the (embedded) sourcemaps, but I'm uncertain.
Your assistance in this matter would be greatly appreciated!