如何在ASP.NET MVC应用程序中自动压缩和最小化JavaScript文件？

因此，我有一个ASP.NET MVC应用程序，它在不同的位置引用了大量javascript文件（在站点主控中，以及在多个视图中的其他引用）

我想知道是否有一种自动化的方法可以在可能的情况下将这些引用压缩并最小化到单个.js文件中。这样的话

<script src="<%= ResolveUrl("~") %>Content/ExtJS/Ext.ux.grid.GridSummary/Ext.ux.grid.GridSummary.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.rating/ext.ux.ratingplugin.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext-starslider/ext-starslider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.dollarfield.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.combobox.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/ext.ux.datepickerplus/ext.ux.datepickerplus-min.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/SessionProvider.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ExtJS/TabCloseMenu.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/ActivityForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/UserForm.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/SwappedGrid.js" type="text/javascript"></script>
<script src="<%= ResolveUrl("~") %>Content/ActivityViewer/Tree.js" type="text/javascript"></script>

。。。可以简化成这样

<script src="<%= ResolveUrl("~") %>Content/MyViewPage-min.js" type="text/javascript"></script>

---

感谢Scott Hanselman最近写了一篇博客，基本上使用了with

CompositeScript

引用和一个

路径

属性：

<asp:ScriptManager runat="server">
    <CompositeScript path="http://www.example.com/1.js">
        <Scripts>
            <asp:ScriptReference />
            <asp:ScriptReference />
            <!-- etc. -->
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

---

就缩小静态文件而言，您可能必须（而且应该）在构建/部署时使用缩小工具。

我个人认为，在开发期间将文件分开是非常宝贵的，而在生产过程中这样做才是重要的。所以我修改了我的部署脚本以实现上述目标

我有一节内容是：

<Target Name="BeforeDeploy">

        <ReadLinesFromFile File="%(JsFile.Identity)">
            <Output TaskParameter="Lines" ItemName="JsLines"/>
        </ReadLinesFromFile>

        <WriteLinesToFile File="Scripts\all.js" Lines="@(JsLines)" Overwrite="true"/>

        <Exec Command="java -jar tools\yuicompressor-2.4.2.jar Scripts\all.js -o Scripts\all-min.js"></Exec>

    </Target>

在我的母版页文件中，我使用：

if (HttpContext.Current.IsDebuggingEnabled)
   {%>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-1.3.2.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery-ui-1.7.2.min.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.form.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.metadata.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/jquery.validate.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/additional-methods.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/form-interaction.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/morevalidation.js")%>"></script>
    <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/showdown.js") %>"></script>
<%
   }  else  {%> 
  <script type="text/javascript" src="<%=Url.UrlLoadScript("~/Scripts/all-min.js")%>"></script>
<% } %>

if（HttpContext.Current.IsDebuggingEnabled）
{%>

构建脚本获取该部分中的所有文件并将它们组合在一起。然后我使用YUI的minifier获得javascript的缩小版本。因为这是由IIS提供的，所以我宁愿在IIS中打开压缩以获得gzip压缩。 ****增加**** 我的部署脚本是MSBuild脚本。我还使用优秀的MSBuild社区任务（）来帮助部署应用程序

我不打算在这里发布我的整个脚本文件，但这里有一些相关的行来演示它的大部分功能

下一节将运行内置asp.net编译器将应用程序复制到目标驱动器（在上一步中，我只运行exec net use命令并映射网络共享驱动器）

复制所有解决方案项目后，我运行以下操作：

    <Target Name="_deploy">
        <Message Text="Removing Old Virtual Directory" />
        <WebDirectoryDelete
            VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)"
            ServerName="$(IISServer)"
            ContinueOnError="true"
            Username="$(username)"  
            HostHeaderName="$(HostHeader)"
            />

        <Message Text="Creating New Virtual Directory" />

        <WebDirectoryCreate 
            VirtualDirectoryName="%(WebApplication.VirtualDirectoryPath)" 
            VirtualDirectoryPhysicalPath="%(WebApplication.IISPath)\$(buildDate)"
            ServerName="$(IISServer)"
            EnableDefaultDoc="true"
            DefaultDoc="%(WebApplication.DefaultDocument)"
            Username="$(username)"
            HostHeaderName="$(HostHeader)"
            />
</Target>

---

这应该足以让您开始自动化部署。我将所有这些内容放在一个名为Aspnetdeploy.msbuild的单独文件中。每当需要部署到环境时，我只需msbuild/t:Target。

正如其他人所建议的，您最好创建一个静态缩小的生成。另外，还有一个版本的YUICompressor avail可以在此处使用.NET:

实际上有一种更简单的使用方法（WDP）。WDP将管理aspnet\u编译器和aspnet\u合并工具的复杂性。您可以通过Visual Studio内的UI自定义该过程

至于压缩js文件，您可以保留所有js文件，并在构建过程中压缩这些文件

<Project>
   REMOVE CONTENT HERE FOR WEB

<Import 
  Project="$(MSBuildExtensionsPath)\MSBuildCommunityTasks\MSBuild.Community.Tasks.Targets" />
<!-- Extend the build process -->
<PropertyGroup>
  <BuildDependsOn>
    $(BuildDependsOn);
    CompressJavascript
  </BuildDependsOn>
</PropertyGroup>

<Target Name="CompressJavascript">
  <ItemGroup>
    <_JSFilesToCompress Include="$(OutputPath)Scripts\**\*.js" />
  </ItemGroup>
  <Message Text="Compresing Javascript files" Importance="high" />
  <JSCompress Files="@(_JSFilesToCompress)" />
</Target>
</Project>

删除此处用于WEB的内容
$（BuildDependsOn）；
压缩JavaScript

这使用了JSCompressMSBuild任务，我认为它是基于JSMin的

想法是，让所有js文件保持原样（即可调试/人类可读）。构建WDP时，它将首先将js文件复制到输出路径，然后调用压缩JavaScript目标以最小化js文件。这不会修改原始源文件，只修改WDP项目输出文件夹中的源文件。然后将文件部署到WDPs输出路径中，其中包括udes是一个预编译的网站。我在我的书中讲述了这个确切的场景（我名字下面的链接）

您也可以让WDP处理虚拟目录的创建，只需选中复选框并填写虚拟目录的名称

对于MSBuild上的某些链接：

赛义德·易卜拉欣·哈希米

---

我的书：

我已经写了一些东西来自动处理这个问题。它使用谷歌的闭包编译器。你可以在这里阅读代码：

谢谢

---

Guido

您可以使用MvcContrib.IncludeHandling。它：

• 支持CSS和JS
• 合并到单个请求
• 缩小
• Gzip/放气压缩
• 设置缓存头
• 使用HTMLHelper扩展方法注册包含，然后在运行时组合它们
• 可通过IoC插入

在外壳下，它使用YUICompressor。

在这种情况下效果很好。 在本例中，我有一个带有样式集合（字符串）的模型。 如果我需要向页面添加自定义样式/JS，那么也可以这样做。 然后调用Html.RenderCss将所有样式/js组合在一个文件中并缩小它

<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet)); 

<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js")); 

<%= Html.RenderCss() %>
</head>

我知道这是一个老问题，但它是在我做一些缩小搜索时首先出现的。我建议使用Gruntjs。这是一个完整的web构建工具。
在这个问题上了解更多/其他选项：我喜欢你的解决方案，但我不太确定我是否完全理解它。1.Url.UrlLoadScript（）是什么？默认情况下，我看不到此方法可用。2.您的自动部署过程是什么？我仍然在做这项老一套的工作，只需执行发布构建，然后右键单击项目并选择“发布”因此，我甚至不知道如何设置它，也不知道您的部署脚本如何适应它。您介意在这里更深入一点吗？我投票给ThanksUp:）这正是我们在使用CI解决方案作为自定义生成任务的过程中所做的。有关#2的答案，请查看MSBuild选项和创建生成脚本。当您“发布”您实际上正在执行一个生成脚本（所有.proj和.sln实际上都是msbuild脚本）。因此，他创建了一个生成任务，通过
<head>
<% foreach (var styleSheet in Model.Styles) {%>
<% Html.IncludeCss(styleSheet)); 

<% } %>
<% Html.IncludeCss("~/Scripts/jquery.1.4.2.js")); 

<%= Html.RenderCss() %>
</head>

<%
Html.IncludeJs("~/scripts/ConsoleLogger.js");
Html.IncludeJs("~/scripts/jquery.log.js");
Html.IncludeJs("~/Scripts/2010.1.416/jquery.validate.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.calendar.min.js");
Html.IncludeJs("~/Scripts/2010.1.416/telerik.datepicker.js");
Html.IncludeJs("~/scripts/jquery.ui.datepicker-en-GB.js");
%>

<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>