将打字稿缩小为一个JS文件，使用gulp保持源地图正常工作

Question

I've crawled all over the net for this one.

I've thought about using --out, but there's a huge essay https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md specifying why that's a bad idea.

It says

--out is really the job of some build tool.

but, doesn't really go further than that. So, I have the following process so far:

1. Lint the typescript
2. Compile the typescript
3. Build the sourcemaps
4. Pipe the compiled typescript into another directory (build)
5. Add all bower deps to index.html file
6. Serve index.html, which points towards appEntryPoint.js, that is simply a JS file that calls some stuff within the rest of the project.

The first line in the transpiled file is: appEntryPoint.js:

define(["require", "exports", "./example"], function (require, exports, example_1) {

I get: "Uncaught reference error, define is not defined". I tried to add require-js so it's loaded before this file, but that didn't work either.

So. What are my options?

1. Can I force typescript to ask just use require and include whatever it needs from other files?
2. Can I minify all of my typescript into a single JS file, and then still have sourcemaps working? If so, how??

For reference, here's my gulpfile.js :

var gulp = require('gulp');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var config = require('./gulpfile.config')();
var sourcemaps = require('gulp-sourcemaps');
var browsersync = require('browser-sync');
var superstatic = require('superstatic');
var usemin = require("gulp-usemin");
var uglify = require("gulp-uglify");
var reload      = browsersync.reload;
var wiredep = require("wiredep").stream;

gulp.task('ts-lint', function(){
  return gulp.src(config.allTs)
    .pipe(tslint())
    .pipe(tslint.report('prose', {
      emitError : false
    }));
});

gulp.task('compile-ts', function(){
  var sourceTsFiles = [
    config.allTs,
    config.typings
  ];

  var tsResult = gulp
    .src(sourceTsFiles)
    .pipe(sourcemaps.init())
    .pipe(tsc({
        module: "amd",
        target: "ES5",
        declarationFiles: false,
        emitError: false,
        emitDecoratorMetadata: true,
      outDir : config.tsOutputPath
    }));

  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.tsOutputPath))
    .pipe(reload({stream:true}));
});

gulp.task('serve', ['ts-lint', 'compile-ts', 'bower'], function() {
    gulp.watch([config.allTs], ['ts-lint', 'compile-ts']);

    browsersync({
        port: 3000,
        files: ['index.html', '**/*.js'],
        injectChanges: true,
        logFileChanges: false,
        logLevel: 'silent',
        notify: true,
        reloadDelay: 0,
        server: {
            baseDir: config.browsersyncpath,
            middleware: superstatic({ debug: false})
        }
    });
});



gulp.task("bower", function () {
    gulp.src("index.html")
        .pipe(wiredep())
        .pipe(gulp.dest("build"));
});

// gulp.task("minify", function () {
//  return gulp.src("build/index.html")
//      .pipe(usemin({
//          assetsDir: config.tsOutputPath,
//          js: [uglify(), "concat"]
//  }))
//   .pipe(gulp.dest(config.tsOutputPath));
// });

gulp.task('default', ['serve']);

Answer 1

只需使用gulp-concat将所有*.js文件合并为一个即可。