Visual Studio + ASP.NET Core + TypeScript - * .ts를 누가 컴파일합니까?

Question

나는 저와 때를 위해 타이프 라이터 파일을 컴파일 할 때 얻는 것에 대해 혼란 스러워요 : 저장에

1. 비주얼 스튜디오.
2. Mads Kristensen의 확장입니다.
3. Gulp.js.
4. Node.js
5. 다른 것. 파일을 타이프한다

는 배치 : 타이프 라이터 컴파일은 초고속하고 자동 업데이트를 얻거나 즉시로 자동 배포하는 방법에

1. ..\app\*.ts
2. ..\wwwroot\app\*.ts

브라우저에서 효과?

TeamCity와 같은 빌드 서버에서는 어떤 현상이 발생합니까?

PS : LESS에도 동일하게 적용됩니까?

Answer 1

일반적으로 시각적 스튜디오는 ts 파일을 저장할 때 프로젝트에서 .ts ~ .js을 컴파일 할 수 있습니다.

두 위치 모두에서 TypeScript를 사용할 수 있습니다.

..\app\*.ts을 선택한 경우 gulp를 사용하여 wwwroot에 js를 넣을 수 있습니다.
그리고 자동 업데이트가 가능하도록 개발중인 ts 파일을 보려면 gule이 필요할 수 있습니다.

..\wwwroot\app\*.ts을 선택하면 브라우저에서 js를 자동으로 업데이트 할 수 있습니다. 그러나 사용자는 원하는 경우 ts 파일을 가져올 수도 있습니다.

tsc을 사용하여 명시 적으로 컴파일하지 않으면 TeamCity에서 t를 컴파일하지 못할 수 있습니다.

Answer 2

VisualStudio 템플릿에는 typescript 컴파일을 위해 xproj에 게시 빌드 지침이 없습니다. 이것은 미리보기에서 벗어날 때 툴링에서 변경 될 수 있습니다.

현재 제 설정에서 nScript typescript 패키지와 gulp 작업을 사용하여 입력 스크립트 프로젝트의 .js 출력과 소스 맵을 만듭니다.

나는 건물 내 wwwroot에/응용 프로그램

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

내 gulp 작업에서 내 모든 타이프 라이터 소스를 포함하는 폴더를 가지고 자바 스크립트와 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)); 
}); 

마지막으로 내가 사용하는 이상하지 typings 타이프 스크립트 정의를 가져올 수 있습니다.

스크립트를 작성하기위한 프론트 엔드 이야기가 있다면 (덜 포함).그런 다음 빌드 서버가 npm devdependencies를 복원하고 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를 추가로 타이프 스크립트 파일을 작성하고 사본 wwwroot 폴더 결과, 두 번째는 완전히 모든 클라이언트 측 코드의 건물입니다 - 나는 이러한 모든 작업을 설명하지 않습니다, 그들은 동일합니다.

내가 watch 메커니즘을 사용하여 개발 편안 들어

, 그래서 아주 쉽게 :

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

그리고 지금 타이프 스크립트 파일이 어떤 변화를 다시 컴파일됩니다. 브라우저에서 캐싱을 방지 - 파일을 추가

나는이 방법

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

주 asp-append-version을 사용하여 다음을 HTML로.

마지막으로 생산성 향상을위한 꿀꺽 꿀꺽 거림을 최소화하여 스크립트 및 스타일 파일을 최소화하고 페이지에 <environment names="Production"> 태그를 삽입 할 수 있습니다.

그래서 나에게 매우 편안합니다. 프로젝트에 build 및 watch 작업을 추가했으며 스크립트 및 스타일 컴파일에 신경 쓰지 않습니다.