2016-03-22 7 views
2

私はTypescriptを使っているプロジェクトに取り組んでいます。現在、Typescriptをコンパイルする問題に直面していて、Gulpを使って結果を連結しています。すなわちGulpを使って最初にTypescriptをコンパイルし、結果を連結してuglifyしますか?

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

私は何をする必要があるかです:

  1. は外部JavaScriptライブラリを取得します。
  2. Typescriptsを取得します。
  3. ソースマップを使用してTypescriptsをコンパイルします。
  4. 結果を前に追加したJavaScriptに連結します。
  5. それらをうすめます。
  6. ソーサースマップを作成します。
  7. 結果をフォルダに保存します。

更新

それともTypeScriptJavaScriptで結果を連結して進める 前にコンパイルされていることを確認するだけの方法。

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

使用法(中:私はもっとcoffeescript男が、何分割約2つの別々のタスクに(テストしていない以下のソリューション、および./tmpフォルダに一時的に出力がある)だ

+0

あなたの問題は何ですか?それは 'output.js'ですか?あなたは2つのタスクを作成することができ、一方は他方を必要とします。 – cl3m

+0

はい、 'JavaScript 'で結果を連結する前に' TypeScript'がコンパイルされていることを確認する必要があります。 –

答えて

3

お使いの端末が):

gulp default 

ガルプが最初tsタスクを実行します、そして、一度完成し、それがdefaultタスクを実行します

+2

これは素晴らしいですが、デバッグ時に 'TypeScript'ソースが利用可能であることを確認するには? –

+0

現在のワークフローではどのように利用できますか? – mix3d

+0

ありがとう、私はヒント 'gulp.task( 'default'、['ts']、function(){})を使っていました。私はそれをうまくテストしなかったが、今のところうまくいく。とてもありがとうございます –

4

あなたは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/')); 
}); 

を私はマップの仕事を調達する方法を私の頭の上をオフに知らないが、私はそれが図のように簡単だと確信していますでる。

+0

私はあなたの一般的なアプローチを使用しましたが、代わりにストリームシリーズパッケージを使用しました。 –

関連する問題