Using Gulp how to first compile Typescript then co

问题:

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.

回答1:

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

回答2:

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.