使用 Gulp 如何先编译 Typescript 然后连接结果并对其进行丑化？

Question

我正在使用 Typescript 开发一个项目，目前我在编译 Typescript 时遇到问题，然后使用 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/'));
});

换句话说，我需要做的是：

获取外部 JavaScript 库。
得到Typescripts.
使用源映射编译Typescripts。
将结果连接到之前添加的 JavaScript。
丑化他们。
创建资源图。
将结果保存到某个文件夹中。

Update

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

Answer 1

我更像是一个 coffeescript 的人，但是拆分成两个单独的任务呢（下面的解决方案未经过测试，./tmp 文件夹中有一个临时输出）：

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/'));
});

用法（在您的终端中）：

gulp default

Gulp 将首先运行 ts 任务，然后，一旦完成，它将运行 default 任务

Answer 2

如果您需要来自 npm 的 event-stream 包，那么您可以这样做：

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/'));
});

我完全不知道源地图是如何工作的，但我相信这很容易理解。

使用 Gulp 如何先编译 Typescript 然后连接结果并对其进行丑化？

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

javascript

typescript

tsc

gulp

gulp-typescript