如何在ASP.NET MVC应用程序中自动压缩和最小化JavaScript文件?(How can I automatically compress and minimize JavaScript fi

编程入门 行业动态 更新时间:2024-10-26 22:29:36
如何在ASP.NET MVC应用程序中自动压缩和最小化JavaScript文件?(How can I automatically compress and minimize JavaScript files in an ASP.NET MVC app?)

所以我有一个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>

谢谢

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

最满意答案

我个人认为,在开发过程中保持文件是分开的,是非常宝贵的,而在生产过程中,这样的事情是值得的。 所以我修改了我的部署脚本为了做到这一点。

我有一个部分,内容如下:

<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编译器中的构建以将应用程序复制到目标驱动器。 (在上一步中,我只运行exec net use命令并映射网络共享驱动器)。

<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 / t:当我需要部署到一个环境时,目标。

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.

更多推荐

javascript,js,text,references,<%,电脑培训,计算机培训,IT培训"/> <meta name

本文发布于:2023-07-31 06:10:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1341884.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:最小化   应用程序   文件   如何在   JavaScript

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!