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。
丑化他们。
创建Sorce地图。
将结果保存到某个文件夹中。

更新

或者只是确保之前编译TypeScript的方法   继续将结果与JavaScript连接起来。

Answer 1

我更像是一个./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

用法（在您的终端中）：

ts

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

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然后连接结果并uglify它？

2 个答案: