我怎么能自动压缩，并减少JavaScript文件中的一个ASP.NET 软应用程序？

https://stackoverflow.com/questions/1224292

11-07-2019
|

题

所以我有一个ASP.NET 软应用程序，引用了一些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>

感谢

解决方案

我个人认为，保持发展过程中文件分开是非常宝贵的，并在生产过程中是当这样的罪名。所以，我修改了我的部署脚本，以上面做的。

我有一个部分，其读取：

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

构建脚本取入部中的所有文件，并将其组合在一起。然后，我使用YUI的minifier得到的JavaScript的缩小版本。因为这是由IIS服务，我宁愿打开压缩在IIS中获得gzip压缩。 **** 添加 **** 我的部署脚本是一个MSBuild脚本。我还使用优秀的MSBuild社区任务（ http://msbuildtasks.tigris.org/ ），以帮助部署应用

我不打算在这里发表我的整个脚本文件，但这里有一些相关的行应表现出最是做什么的。

以下部分将在asp.net编译运行生成的应用程序通过复制到目标驱动器。（在前面的步骤I只是运行EXEC净使用命令和映射网络共享驱动器）。

<Target Name="Precompile" DependsOnTargets="build;remoteconnect;GetTime">

        <MakeDir Directories="%(WebApplication.SharePath)\$(buildDate)" />

        <Message Text="Precompiling Website to %(WebApplication.SharePath)\$(buildDate)" />

        <AspNetCompiler
            VirtualPath="/%(WebApplication.VirtualDirectoryPath)"
            PhysicalPath="%(WebApplication.PhysicalPath)"
            TargetPath="%(WebApplication.SharePath)\$(buildDate)"
            Force="true"
            Updateable="true"
            Debug="$(Debug)"
            />
        <Message Text="copying the correct configuration files over" />

        <Exec Command="xcopy $(ConfigurationPath) %(WebApplication.SharePath)\$(buildDate) /S /E /Y" />

     </Target>

在所有溶液项目在运行此被复制的：

    <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 /吨：目标每当我需要部署到的环境

其他提示

实际上还有更简单的方式使用网部署项目 (衡).发展方案所管理的复杂性 aspnet__编译器 和 aspnet__合并 工具。你可以定制过程，由一个用户界面内部的Visual Studio.

至于压缩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>

这种使用JSCompress MSBuild任务 MSBuild社会的任务我认为这是基于关闭JSMin.

这个想法是，保留所有js文件，因为它们都是 (即可调试/人可读).当你建立该方案，它将第一个复制js文件 OutputPath 然后 CompressJavascript 目标被称为尽量减少js文件。这并不修改原始来源的文件，仅仅是那些输出的文件夹的发展方案的项目。然后部署的文件中WDPs输出的路径，其中包括预compilied的网站。我涵盖这一确切的情况，在我的书 (下面的链接我的名字).

你也可以让衡处理创造的虚拟目录，以及，只是检查一框并填写在名称的虚拟目录。

对于一些链接MSBuild:

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

我的书：内部Microsoft建立发动机：使用但这并不说明人们的团队的基础建设

斯科特汉塞尔尔曼最近在博客有关组合和移动脚本静态文件，基本上都采用在 ScriptManager 与CompositeScript引用和Path属性：

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

在涅槃的静态文件的条款，你可能要（也应该）使用缩小文件工具在编译/部署时间。

MvcContrib.IncludeHandling 针对这种情况运行良好。在这个例子中，我有一个风格的集合（串）模型。另外，如果我需要自定义样式/ JS添加到页面中，然后可以做到这一点。然后调用Html.RenderCss结合了所有的形式/在一个文件中并minifies js的一起它。

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

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

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

的JavaScript方式相同。

<%
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");
%>

当此获取呈现给客户端的输出如下所示（精缩合并1个文件）

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

该API还提供其上时，不会再压缩或组合脚本时设定其是大大有益的调试标志。

在短短的几分钟内，我从YSlow的评分F的去B.（24个脚本降到2）...真棒！和下降40kbs的。

明显的不足之处是该服务器是做在运行中的压缩。我认为有选择缓存结合脚本规定的时间这将迅速缓解这虽然。

正如其他人的建议，你最好是去创建一个静态的缩小的版本。另外，有可用的版本的YUICompressor for .NET的位置： http://www.codeplex.com/YUICompressor

你可以使用MvcContrib.IncludeHandling.它：

支持CSS和JS
结合到一个单一的请求
Minifies
Gzip/紧缩缩
设立缓存头
使用HTMLHelper扩展的方法注册包括然后将它们合并在运行时间
是的可插入通过IoC

下面，它使用YUICompressor.

我有写一些东西来处理这个对我来说是自动的。它使用谷歌的封闭编译器。你可以阅读这里的代码:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

感谢

Guido

我知道这是一个老问题，但它第一次出现了，因为我是做一些微小的搜索。我会建议使用Gruntjs， http://gruntjs.com 。它是一个完整的网络的构建工具。

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow