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

查看：181
本文介绍了如何自动压缩和最小化ASP.NET MVC应用程序中的JavaScript文件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我有一个ASP.NET MVC应用程序，在不同的地方（在网站主人和其他参考在几个视图中）引用了一些javascript文件。



我想知道是否有一种自动化的方式来压缩和尽可能减少这种引用到一个单一的.js文件。这样... 

 < script src =<％= ResolveUrl（〜）％> /ExtJS/Ext.ux.grid.GridSummary/Ext.ux.grid.GridSummary.jstype =text / javascript>< / script> 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / ext.ux.rating / ext.ux.ratingplugin.jstype =text / javascript> < / script> 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / ext-starslider / ext-starslider.jstype =text / javascript>< / script> ; 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / ext.ux.dollarfield.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / ext.ux.combobox.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / ext.ux.datepickerplus / ext.ux.datepickerplus-min.jstype =text / javascript >< / script> 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / SessionProvider.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ExtJS / TabClos​​eMenu.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ActivityViewer / ActivityForm.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ActivityViewer / UserForm.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ActivityViewer / SwappedGrid.jstype =text / javascript>< / script& 
< script src =<％= ResolveUrl（〜）％> Content / ActivityViewer / Tree.jstype =text / javascript>< / script&

...可以减少到这样... 

 < script src =<％= ResolveUrl（〜）％> Content / MyViewPage-min.jstype =text / javascript >< / script>

感谢

解决方案

我个人认为，在开发过程中保持文件分离是非常宝贵的，而在生产过程中，这样的事情是非常重要的。



我有一个部分：

 < Target Name =BeforeDeploy> 
 
< ReadLinesFromFile File =％（JsFile.Identity）> 
< Output TaskParameter =LinesItemName =JsLines/> 
< / ReadLinesFromFile> 
 
< WriteLinesToFile File =Scripts\all.jsLines =@（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 / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / jquery-1.3.2.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / jquery-ui-1.7.2.min.js）％>> ; / script> 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / jquery.form.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / jquery.metadata.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / jquery.validate.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / additional-methods.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / form-interaction.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / morevalidation.js）％>>< / script& 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / showdown.js）％>>< / script& 
<％
} else {％> 
< script type =text / javascriptsrc =<％= Url.UrlLoadScript（〜/ Scripts / all-min.js）％>>< / script& 
<％}％>

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



我不会在这里发布我的整个脚本文件，但这里有一些相关的线应该展示大部分的功能。



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

 <目标名称=预编译DependsOnTargets =build; remoteconnect; GetTime> 
 
< MakeDir Directories =％（WebApplication.SharePath）\ $（buildDate）/> 
 
< Message Text =预编译网站到％（WebApplication.SharePath）\ $（buildDate）/> 
 
< AspNetCompiler 
 VirtualPath =/％（WebApplication.VirtualDirectoryPath）
 PhysicalPath =％（WebApplication.PhysicalPath）
 TargetPath =％（WebApplication 。$。$（buildDate）
 Force =true
 Updateable =true
 Debug =$（Debug）
 /> 
< Message Text =通过复制正确的配置文件/> 
 
< Exec Command =xcopy $（ConfigurationPath）％（WebApplication.SharePath）\ $（buildDate）/ S / E / Y/> 
 
< / Target>所有的解决方案项目复制后，我运行这个：
 
 
 < Target Name =_ deploy> 
< Message Text =删除旧虚拟目录/> 
< WebDirectoryDe​​lete 
 VirtualDirectoryName =％（WebApplication.VirtualDirectoryPath）
 ServerName =$（IISServer）
 ContinueOnError =true
用户名=$ （username）
 HostHeaderName =$（HostHeader）
 /> 
 
< Message Text =创建新虚拟目录/> 
 
< WebDirectoryCreate 
 VirtualDirectoryName =％（WebApplication.VirtualDirectoryPath）
 VirtualDirectoryPhysicalPath =％（WebApplication.IISPath）\ $（buildDate）
 ServerName =$（IISServer）
 EnableDefaultDoc =true
 DefaultDoc =％（WebApplication.DefaultDocument）
 Username =$（username）
 HostHeaderName =$ （HostHeader）
 /> 
< / Target> 
  
这应该足以让您开始自动化部署。我把所有这些东西放在一个单独的文件，名为Aspnetdeploy.msbuild。我只是msbuild / t：目标每当我需要部署到环境。
 
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).  



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>

Thanks
 解决方案 
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.



I have a section that reads:
<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>

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

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.



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>

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屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆