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.

Answer 2

I'm more a coffeescript guy, but what about splitting into two separate tasks (solution below not tested, and there is a temporary output to the ./tmp folder):

gulp.task('ts', function () {
    gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(gulp.dest('./tmp/ts'));
});

gulp.task('default', ['ts'], function() {
    gulp.src(['vendor/**/*.js', './tmp/ts/output.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

Usage (in your terminal):

gulp default

Gulp will first run the ts task, then, once completed, it will run the default task