ブラウザユーザgulpとtsprojectのためにtypescriptファイルをバンドルするには？

Question

私はちょっとフロントエンドの開発には新しく、C＃とJava開発者の長いバックエンドであり、どのようにしてフロントエンドアプリケーションをビルドする方法を知りたいと思います。私はtypescriptを使用してアプリケーションを構築し、ビルドパイプラインにgulpを使用して、コードを単一のJavaScriptファイルにトランスペアレント化し、バンドルし、縮小したいと考えています。

この目的のために、私はノードのモジュールtsprojectを見てきました。理解できる限り、私が望むものを正確に行うことになっています。 。

var gulp = require('gulp'); 
var clean = require('gulp-clean'); 
var tsproject = require('tsproject'); 

gulp.task('default', [ 'min-js' ]); 

gulp.task('clean', function() { 
    return gulp 
     .src('./dist/', { read: false }) 
     .pipe(clean()); 
}); 

gulp.task('min-js', [ 'clean' ], function() { 
    return tsproject 
     .src('./tsconfig.json') 
     .pipe(gulp.dest('./dist/js')) 
}); 

そして、私のtsconfig.json：

{ 
    "compilerOptions": { 
     "sourceMap": true, 
     "noImplicitAny": true, 
     "module": "commonjs", 
     "target": "es5", 
     "jsx": "react", 
     "outDir": "./" 
    }, 
    "files": [ 
     "./src/**/*.tsx", 
     "./src/**/*.ts" 
    ], 
    "bundles": { 
     "myApp": { 
      "files": [ 
       "./src/App.tsx" 
      ], 
      "config": { 
       "minify": true, 
       "sourcemap": true 
      } 
     } 
    } 
} 

除いて、私はそれは私が:-(やりたいことを得ることができない

これは、関連する部品の私gulpfile.jsです

私はこれを、transpiled、bundle、およびminified JavaScriptコードを含む単一のjsファイルを出力すると期待していましたが、バンドルされた（変換されずに縮小された）Typescriptファイル（./dist/js/myApp.min.ts）。

私はやっていますか？何か間違っている、または私は完全にtsprojectの目的と意図を誤解していますか？

Answer 1

まあ、私はこれはそれについて移動するための最良の方法であるのかはわからないが、私は最終的にこのようなgulpfileでの作業の事だ：

var gulp = require('gulp'); 
var browserify = require('gulp-browserify'); 
var clean = require('gulp-clean'); 
var concat = require('gulp-concat'); 
var sourcemaps = require('gulp-sourcemaps'); 
var ts = require('gulp-typescript'); 
var uglify = require('gulp-uglify'); 

gulp.task('default', [ 'min-js' ]); 

gulp.task('clean', function() { 
    return gulp 
     .src([ 
      './tmp/', 
      './dist/' 
     ], { read: false }) 
     .pipe(clean()); 
}); 

gulp.task('transpile-ts', ['clean'], function() { 
    var tsproject = ts.createProject('./src/tsconfig.json'); 
    return tsproject 
     .src() 
     .pipe(sourcemaps.init()) 
     .pipe(tsproject()).js 
     .pipe(sourcemaps.write('./sourcemaps')) 
     .pipe(gulp.dest('./tmp/js')); 
}); 

gulp.task('min-js', [ 'transpile-ts' ], function() { 
    return gulp 
     .src('./tmp/js/App.js') 
     .pipe(sourcemaps.init({ loadMaps: true })) 
     .pipe(browserify()) 
     .pipe(uglify()) 
     .pipe(concat('App.min.js')) 
     .pipe(sourcemaps.write('./sourcemaps')) 
     .pipe(gulp.dest('./dist/js')) 
}); 

は基本的に私はCommonJSでJavaScriptにすべて活字体ファイルをtranspileを一時ディレクトリにインポートします。次に、Browserifyを使用して、JavaScriptファイルを1つのファイルにバンドルします（つまり、CommonJSのインポートを解決します）。最後に、結果のJavaScriptファイルを縮小します。 Voila！

何らかの理由で私は、トランスファイルされたファイルを一時ディレクトリに書き込んだ後、それらのファイルをバンドルしてサイズを小さくしなければなりませんでした。 pipe(tsproject())の結果をbrowserify()にパイプするのではなく...