Visual Studio + ASP.NET Core + TypeScript - * .tsをコンパイルする人？

Question

私は私とするときのために活字ファイルをコンパイルするために取得するかについて混乱しています：

1. 保存上のVisual Studio。
2. Mads Kristensenの拡張機能。
3. Gulp.js
4. Node.js
5. 他にもあります。ファイルを活字体なければならない

を置くこと：活字体のコンパイルが超高速にし、自動更新を取得したり、即時に自動展開する方法

1. ..\app\*.ts
2. ​​

ブラウザの効果？

TeamCityのようなビルドサーバではどうなりますか？

PS：LESSにも同じですか？

Answer 1

一般的に、ビジュアルスタジオは、tsファイルを保存するときにプロジェクト内で.ts〜.jsをコンパイルできます。

TypeScriptは、両方の場所に配置できます。

..\app\*.tsを選択した場合は、gulpを使用してwwwrootにjsを入力する必要があります。
また、開発中のtsファイルを監視するためにguleが必要な場合がありますので、自動更新することができます。

​​を選択すると、jsはブラウザで自動更新できます。しかし、ユーザーは必要に応じてtsファイルを入手することもできます。

TeamCityは、tscを使用してコンパイルすることを明示しない限り、tをコンパイルできません。

Answer 2

現時点では、Visual Studioのテンプレートには、typescriptのコンパイルを行うxprojのビルド指示がありません。これは、ツールがプレビューから外れたときにおそらく変化するものですが、

私の現在の設定では、typescriptプロジェクトの.js出力とソースマップを作成するために、npm typescriptパッケージとgulpタスクに依存しています。

私は建物のための私の wwwrootに/アプリ

- wwwroot 
    - app 
     - typings 
     - globals 
     index.d.ts 
     app.ts 
     tsconfig.json 
     tslint.json 

私gulpタスクの下にすべての私のtypescriptですソースを含むフォルダを持っJavaScriptとsourcemaps：

gulp.task('build:ts', false, function() { 
    var tsProject = $.typescript.createProject(app + 'tsconfig.json', { sortOutput: true }); 
    var stream = tsProject.src(); 
    return stream.pipe($.sourcemaps.init()) 
       .pipe($.typescript(tsProject)) 
       .pipe($.sourcemaps.write('.', { includeContent: false, sourceRoot: '' })) 
       .pipe(gulp.dest(app)); 
}); 

最後が、私は使用以上ないタイピングtypescript定義を取得する。

スクリプトを作成するための完全なフロントエンドストーリーが含まれている場合（あまり含まれていません）。その後、ビルドサーバーはnpmの依存関係を復元し、gulpタスクを実行してフロントエンドコードをうまく構築することができます。 Visualstuioオンラインビルドタスクにも同じことが適用されます。私のペットプロジェクトで

Answer 3

は私が.less.tsファイルを構築するためのがぶ飲みを使用します。それはこのように動作します：

gulp.task('processTypeScript', function() { 
    gulp.src('Content/TypeScript/**/*.ts') 
     .pipe(sourcemaps.init()) 
     .pipe(ts(tsOptions)).js 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('./wwwroot/content/script')); 
}); 
gulp.task('build', ['copyLibs', 'processTypeScript', 'processLess']); 

最初のタスクはsourcemapsを追加することでtypescriptですファイルを構築し、コピーがwwwrootフォルダになり、二番目は完全にすべてのクライアント側のコードの建物です - 私は、これらすべてのタスクを記述していません、彼らは同じです。それは非常に簡単ですので、私は、watchメカニズムを使用して開発し、快適のために

：

gulp.task('watch', ['processTypeScript', 'processLess'], function() { 
    gulp.watch('Content/TypeScript/**/*.ts', ['processTypeScript']); 
    gulp.watch('Content/Less/**/*.less', ['processLess']); 
}); 

そして今typescriptですファイルは、その中のすべての変更に再コンパイルされます。ブラウザでキャッシュを防ぐ - 私はこのアプローチにasp-append-versionへ

<environment names="Development"> 
    <script asp-src-include="~/content/script/**/*.js" asp-append-version="true"></script> 
    <link rel="stylesheet" asp-href-include="~/content/style/**/*.css" asp-append-version="true" /> 
</environment> 

注意を使うHTMLにファイルを追加するための

。

最後に、最小化されたuglifiedスクリプトとスタイルファイルをgulpを介してprodution構成に組み込み、<environment names="Production">タグのページにthayを含めることができます。

私にとってはとても快適です。私はbuildとwatchタスクをプロジェクトに追加しました。スクリプトとスタイルのコンパイルには気を付けません。