使用Gulp如何首先编译Typescript然后连接结果并丑化它？ [英] Using Gulp how to first compile Typescript then concatenate the result and uglify it?

问题描述

我正在使用 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'）
 //我想添加ts文件然后combile和concat 
 .gulp.src（'src / ** / *。ts'）
 .pipe（sourcemaps.init（））
 .pipe（ts（{
 
。（concat（'all.js'））
 .pipe（uglify（））
 out：'output.js'
} ）; 
 .pipe（sourcemaps.write（'/'））
 .pipe（gulp.dest（'./ dist /'））; 
}）; 
  

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

1. 获取外部 JavaScript 库。
   
2. 获取 Typescripts code>。

3. 使用源地图编译 Typescripts 。

4. 对结果进行Concat到之前添加的 JavaScript 。


5. 丑化它们。 创建女巫地图



将结果保存到某个文件夹中。更新




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







解决方案

我更像是一个 coffeescript 的家伙，但是如何分解成两个独立的任务（下面的解决方案未经测试，并且有一个临时输出到文件夹）：



  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默认
  

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




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.

解决方案

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

这篇关于使用Gulp如何首先编译Typescript然后连接结果并丑化它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！