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"));
});