Källkartor med browserify, typescript och gulp


Jag har lite TypeScript-kod. Vad jag vill är:

.ts files -> tsc -> .js files -> browserify -> single .js file

Jag kan göra detta men jag har ett problem med sourcemaps. När jag startar webbläsaren är sökvägen till .ts-filerna felaktig (source/). Jag vet inte var jag ska ställa in det. Jag har redan sett många sidor men jag kan inte använda någon av de givna lösningarna (stor chans att jag gör något fel).

För att få det jag har just nu använder jag:

gulp tsc && cd temp && browserify --debug Application.js > app.js

Jag har följande gulpfile.js:

var gulp = require('gulp'); 
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('tsc', function() {
    return gulp
      .src("src/*.ts")
      .pipe(sourcemaps.init())
         .pipe(ts({
              target: "es5"
              , module: "commonjs"
          }))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest("temp"));
});

Jag använder inte gulp-browserify eftersom det inte längre underhålls som det står här. Jag kunde inte hitta vad som är det bästa sättet att göra detta för närvarande.

Uppdatering

Jag lyckades göra det med:

browserify src/Application.ts -p [ tsify --target=es5 --module=commonjs ] --d ebug > temp/app.js

Jag är dock intresserad av att använda Gulp för att lösa detta problem.

Uppdatering

Jag hittade en lösning på TypeScript-sajten här. Min gulp-uppgift är:

var gulp = require('gulp'),
    browserify = require("browserify"),
    source = require('vinyl-source-stream'),
    tsify = require("tsify");

var tsconfig = {
    noImplicitAny: true,
    target: "es5",
    module: "commonjs"
};

gulp.task("default", function () {
    return browserify({
        basedir: ".",
        debug: true,
        entries: ["src/Application.ts"],
        cache: {},
        packageCache: {}    
    })
    .plugin(tsify, tsconfig)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("js"));
});