Using Gulp how to first compile Typescript then concatenate the result and uglify it?

Question

I'm working on a project using Typescript currently I'm facing a problem compiling Typescript and then concatenate the result using Gulp.

var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('default', function () {
    gulp.src('vendor/**/*.js')
        // I want to add ts files then combile and concat
        .gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(concat('all.js'))
        .pipe(uglify());
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

In words what I need to do is:

1. Get the external JavaScript libraries.
2. Get Typescripts.
3. Compile Typescripts with source map.
4. Concat the result to the previously added JavaScript.
5. Uglify them.
6. Create the sorce map.
7. Save the result into some folder.

Update

Or just a way to make sure that the TypeScript is compiled before proceeding with concatenating the result with JavaScript.

Answer 1

If you require the event-stream package from npm, then you can do this:

var merge = require('event-stream').merge;

gulp.task('default', function() {
    var js = gulp.src('vendor/**/*.js');

    var ts = gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }));

    return merge(js, ts)
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/'));
});

I don't know off the top of my head how to source maps work but I'm sure it's easy to figure out.