使用 Bundler 和 Minifier 在 Save 上编译 CSS/JS 文件答案

【问题标题】：Compile CSS/JS files on Save using Bundler and Minifier使用 Bundler 和 Minifier 在 Save 上编译 CSS/JS 文件
【发布时间】：2017-06-15 02:07:50
【问题描述】：

我最近从 Visual Studio 2013 切换到 Visual Studio 2015，以便在 MVC 中开发我的 Web 应用程序。我们正在使用 LESS 和 JS 文件来编译这两种文件类型的缩小版本。

现在在 VS2013 中有一个功能，在 LESS 文件中用于在对 .LESS 文件进行任何更改时自动编译为 .CSS 文件。这同样发生在 JS 文件上，其中 .min.js 文件在任何改成 JS 文件。

所以现在对于 VS2015，我知道有新的独立扩展可以做到这一点，即“Web Compiler”和“Bundler and Minifier”，我也已经对其进行了全面研究，但我仍然无法使用它们如果 .LESS 或 .JS 文件相应更改，请更新缩小版本。

我知道有可用于 VS2015 的称为 Grunt 和 Gulp 的任务运行器，但我需要知道如何使用这些工具在保存时实现此编译。

【问题讨论】：

标签： visual-studio-2015 bundler minify web-compiler

【解决方案1】：

回答 1 这通常可以通过删除 %localappdata%\temp\WebCompiler??? 文件夹来解决。

有时候需要重启VS，有时候不需要。

并不适合所有人，但似乎适合很多人。

答案 2 对于那些感兴趣的人，我找到了另一个答案，这似乎提供了额外的好处。

如果您将 Razor 视图添加到您的项目（我将其命名为 JsHelper.cshtml 并将其添加到 \Views\Shared）并使用以下内容（添加了额外的换行符以使其适合 SO 宽度）.. .

@model string
@{
  string ext = HttpContext.Current != null
               && HttpContext.Current.Request.Url.Host.Contains("localhost")
    ? ""
    : ".es5.min";
}
<script src="/Scripts/@Model@(ext).js" type="text/javascript"></script>

...那么不要像这样添加脚本标签...

<script src="/Scripts/General.es5.min.js" type="text/javascript"></script>

...你可以添加这个...

@Html.Partial("~/Views/Shared/JsHelper.cshtml", "General")

当您在 Visual Studio 中运行网站时，将使用未编译版本的 Javascript 文件。在其他任何地方（例如在生产服务器上）运行时，将使用.es5.min.js 版本。

由于发布 Web 项目涉及构建它，这将编译 .js 文件，因此您可以确信发布的已编译和缩小文件是最新的。

这有一个附带好处，即在浏览器中调试脚本时，您可以访问 .js 文件的完整版本，而不是直接引用它们时获得的编译和缩小版本。由于最新版本的 Web 编译器中发生的另一个重大变化是它们在编译时不再生成 .map.js 文件，这是一个巨大的附带好处。

希望这会有所帮助。

【讨论】：