如何在 ASP.NET MVC 应用程序中自动压缩和最小化 JavaScript 文件? [英] How can I automatically compress and minimize JavaScript files in an ASP.NET MVC app?

问题描述

所以我有一个 ASP.NET MVC 应用程序，它在不同的地方(在站点主站和多个视图中的附加引用中)引用了许多 javascript 文件.

So I have an ASP.NET MVC app that references a number of javascript files in various places (in the site master and additional references in several views as well).

我想知道是否有一种自动化的方法可以将此类引用压缩并尽可能减少到单个 .js 文件中.以至于这...

I'd like to know if there is an automated way for compressing and minimizing such references into a single .js file where possible. Such that this ...

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

...可以简化成这样...

... could be reduced to something like this ...

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

谢谢

推荐答案

我个人认为在开发过程中将文件分开是非常宝贵的，而在生产过程中，这样的事情很重要.所以我修改了我的部署脚本，以便完成上述操作.

I personally think that keeping the files separate during development is invaluable and that during production is when something like this counts. So I modified my deployment script in order to do that above.

我有一个部分写着:

<Target Name="BeforeDeploy">

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

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

        <Exec Command="java -jar toolsyuicompressor-2.4.2.jar Scriptsall.js -o Scriptsall-min.js"></Exec>

    </Target>

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

And in my master page file I use:

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/)来帮助部署一个申请.

The build script takes all the files in the section and combines them all together. Then I use YUI's minifier to get a minified version of the javascript. Because this is served by IIS, I would rather turn on compression in IIS to get gzip compression. **** Added **** My deployment script is an MSBuild script. I also use the excellent MSBuild community tasks (http://msbuildtasks.tigris.org/) to help deploy an application.

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

I'm not going to post my entire script file here, but here are some relevant lines to should demonstrate most of what it does.

以下部分将在 asp.net 编译器中运行构建，以将应用程序复制到目标驱动器.(在上一步中，我只是运行 exec net use 命令并映射网络共享驱动器).

The following section will run the build in asp.net compiler to copy the application over to the destination drive. (In a previous step I just run exec net use commands and map a network share drive).

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

在复制所有解决方案项目后，我运行:

After all of the solution projects are copied over I run this:

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

That should be enough to get you started on automating deployment. I put all this stuff in a separate file called Aspnetdeploy.msbuild. I just msbuild /t:Target whenever I need to deploy to an environment.

这篇关于如何在 ASP.NET MVC 应用程序中自动压缩和最小化 JavaScript 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！