title: Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS
body: <p>I'm working on a Typescript project that is transpiled to ES5 JS and then run through browserify to create a single .js bundle and sourcemap. The bundled sourcemaps point to the <em>transpiled JS</em> rather than the <em>source TS</em> even though I am generating sourcemaps which properly point to the source TS when transpiling to JS.</p>
  
  <p>It's as if browserify is ignoring the existing sourcemaps pointing to the TS code and creating its own new maps to the transpiled JS code.</p>
  
  <p>Here are my gulp tasks for reference- code is compiled to a temp folder and then browserified from there. This uses browserify-incremental to support incremental compilation. </p>
  
  <p>Thanks!</p>
  
  <p><strong>Note:</strong> Via other SO questions I have already tried using <strong>tsify</strong>, per my understanding it won't work with my project as we use import syntax &amp; commonjs, it reports compile issues where tsc and gulp-typescript do not (same errors whether used via gulp or via CLI). I also tried minifyify but it did not solve the issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gulp        = require('gulp'),
    ts          = require('gulp-typescript'),
    browserify = require('browserify'),
    browserifyInc = require('browserify-incremental'),
    source      = require('vinyl-source-stream'),
    del         = require('del'),
    sourcemaps  = require('gulp-sourcemaps'),
    buffer = require('vinyl-buffer'),
    xtend = require('xtend');
  
  var tsProject = ts.createProject('tsconfig.json');
  
  //COMPILE TS
  gulp.task('compileTs', function () {
    var sourceTsFiles = [config.src.tsFiles, config.src.tsTypes];
  
    var tsResult = gulp.src(sourceTsFiles)
      .pipe(sourcemaps.init())
      .pipe(ts(tsProject));
  
    return tsResult.js
      .pipe(sourcemaps.write('.', {
        //includeContent: false,
        //sourceRoot: "../../src/js/"
      }))
      .pipe(gulp.dest(config.tempDir));
  });
  
  //BUNDLE BUILT TS-&gt;JS
  gulp.task('bundleJs', [], function () {
    var b = browserify(xtend(browserifyInc.args, {
      entries: config.tempDir + '/main.js',
      extensions: ['.js', '.jsx'],
      debug: true
    }));
  
    browserifyInc(b,  {cacheFile: config.tempDir + '/browserify-cache.json'});
  
    return b.bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.dest.jsDir));
  });</code></pre>
  </div>
  </div>
  </p>