Visual Studio：处理 Typescript 和 LESS 项目文件（使用 TFS 构建）答案

【问题标题】：Visual Studio: Handling Typescript and LESS project files (with TFS Build)Visual Studio：处理 Typescript 和 LESS 项目文件（使用 TFS 构建）
【发布时间】：2015-04-15 00:24:32
【问题描述】：

我目前有一个使用 .less 文件和标准 .js 文件的 ASP.Net MVC 项目设置。

我的 less 文件在被 Web Essentials Visual Studio 扩展程序保存时被编译，如下所示：

我必须做的一件烦人的事情是将less 文件的构建操作设置为“None”，这样它就不会出现在服务器上的构建文件中，但这是可以管理的。

我已将 TypeScript 扩展添加到 Visual Studio，并开始将我的 .js 文件转换为 .ts 文件。类似于.less文件，当我保存.ts文件时它们会被重新编译；但是，.js 文件并未添加到我的项目中。这是一个问题，因为 TFS 没有用于其构建的 .js 文件（并且不会编译该文件，因为那里不存在该 TypeScript 工具）。

我可以将.js 文件添加到项目中，然后破解项目文件以使其成为依赖项：

不过，这个过程似乎也有点痛苦。所以我的问题是：我应该在这里采取什么正确的方法？

1) 不要在 TFS 中包含 .css 和 .js 文件，并找到一种方法让我们的 TFS 服务器在构建期间编译这些文件（以某种方式添加 .ts 扩展名，并且是否有用于编译 @ 的构建操作987654339@?)。

2) 像我目前正在做的那样包括所有文件，但是找到一种更好的方法来添加.ts 文件（无需编辑项目文件）和.less 文件（无需更改构建操作）。

到目前为止，我还没有为任何一条路线找到好的解决方案。

【问题讨论】：

那么当你保存.ts，它会生成.js，它不想将它添加到源代码管理中？你能右键单击生成的.js 并说“添加到解决方案吗？”
旁注：查看NestIn extension。它对于轻松地对相似文件进行分组很有用。我在页面下方嵌套了特定于页面的样式和脚本，并有一个编译和缩小所有内容的构建脚本。太棒了。
Dleh，是的，这就是我目前正在做的事情。 @DavidSherret，看起来很棒！我想我更喜欢让构建服务器编译这些文件，但我认为我当前进程的扩展现在就可以了。谢谢！

标签： asp.net visual-studio-2013 less typescript tfsbuild

【解决方案1】：

选择选项 1。只提交 Less 和 Typescript 文件，让构建系统生成 css 和 Javascript。

【讨论】：

我完全赞成这样做，但我还没有找到一个好的方法（尤其是打字稿）。我尝试遵循这篇文章的建议：tomdupont.net/2013/09/typescript-on-your-build-server.html，但是，当我所有的参考都正常工作时，构建服务器只会说“tsc.exe exited with code 1”而没有进一步的解释

【解决方案2】：

自从提出这个问题后，我们已经升级到 Visual Studio 2015 并为 Atlassian 保留了 TFS，但这应该仍然适用：

我删除了所有生成的css文件并将以下gulpfile.js添加到项目中：

/// <binding AfterBuild='less' ProjectOpened='less-watch' />
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var path = require('path');
var plumber = require('gulp-plumber');
var concat = require('gulp-concat');

var lessPaths = [*my file paths*];
gulp.task('less', function () {
    return gulp.src(lessPaths, { base: "./" })
        .pipe(plumber())
        .pipe(less())
        .pipe(concat('app-styles.css'))
        .pipe(gulp.dest('./styles/'));
});
gulp.task('less-watch', function () {
    gulp.watch(lessPaths, ['less']);
});

这会将我生成的所有文件合并到一个“/styles/app-styles.css”文件中。从那里，我们需要将以下内容添加到 .csproj 文件中，以便在构建/部署时将此新文件复制到我们的输出文件夹中：

<Target Name="GulpTasks" AfterTargets="AfterBuild">
    <Exec Command="npm install" />
    <Exec Command="node_modules\.bin\gulp less" />
    <Copy SourceFiles="styles\app-styles.css" DestinationFolder="$(WebProjectOutputDir)\styles" />
  </Target>

【讨论】：