할 수 있는 방법을 자동으로 압축을 최소화 자바 스크립트 파일에 ASP.NET MVC 응용 프로그램?
https://stackoverflow.com/questions/1224292
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
그래서 나는 ASP.NET MVC 는 참조 다수의 자바스크립트 파일을 다양한 장소에서(사이트에서 마스터하고 추가적인 참 여러 가지 전망뿐만 아니라).
나는 알고 싶어하는 경우가 있는 자동화된 방법에 대한 압축을 최소화하고 이러한 참조로 단일.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의 미니 파이어를 사용하여 자바 스크립트의 최소화 버전을 얻습니다. 이것은 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 : 환경에 배포해야 할 때마다 대상입니다.
다른 팁
실제로 사용 방법이 훨씬 쉬운 방법이 있습니다 웹 배포 프로젝트 (WDP). WDP는의 복잡성을 관리합니다 aspnet__compiler 그리고 aspnet__merge 도구. Visual Studio 내부의 UI로 프로세스를 사용자 정의 할 수 있습니다.
JS 파일을 압축하려면 모든 JS 파일을 제자리에두고 빌드 프로세스 중에 이러한 파일을 압축 할 수 있습니다. 따라서 WDP에서는 다음과 같은 것을 선언합니다.
<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 파일을 그대로 두는 것입니다. (즉, 디버그 가능/인간 읽을 수 있음). WDP를 빌드하면 먼저 JS 파일을 출력 그리고 그 다음 compressjavaScript JS 파일을 최소화하기 위해 대상이 호출됩니다. 이것은 원래 소스 파일을 수정하는 것이 아니라 WDP 프로젝트의 출력 폴더에있는 파일 만 수정합니다. 그런 다음 사전 컴파일 된 사이트가 포함 된 WDPS 출력 경로에 파일을 배포합니다. 나는이 정확한 시나리오를 내 책에서 다루었 다 (내 이름 아래 링크).
WDP가 가상 디렉토리 생성도 처리 할 수있게하고 확인란을 확인하고 가상 디렉토리의 이름을 채우십시오.
MSBuild의 일부 링크의 경우 :
이브라힘 하시미 (Ibrahim Hashimi)
Scott Hanselman은 최근에 블로그를 작성했습니다 스크립트를 정적 파일에 결합하고 이동합니다, 기본적으로 사용 ScriptManager ~와 함께 CompositeScript 참고 문헌 및 a 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 모든 스타일/js 에서 함께 한 파일을 최소화하다.
<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");
%>
면 렌더링하는 클라이언트 출력은 다음과 같습니다(최소화합 1 개 파일)
<link rel='stylesheet' type='text/css' href='/include/css/-QdUg9EnX5mpI0e4aKAaOySIbno%40'/>
API 또한 제공하는 디버그 국기하는 경우에 없는 축 또는 스크립트를 결합하여 설정할 때 매우 유용합니다.
몇 분 만에 갔에서 Yslow 점 F B.(스크립트 24 2)...니다!과 40kbs.
분명한 단점은 서버는 압니다.가 있다고 생각하는 옵션을 캐시 결합된 스크립트가 정의된 기간에는 것이 빠르게 완화이지만.
다른 사람들이 제안한 것처럼, 당신은 정적 최소화 빌드를 만드는 것이 가장 좋습니다. 또는 .NET에서 사용할 수있는 Yuicompressor 버전이 있습니다. http://www.codeplex.com/yuicompressor
mvccontrib.includehandling을 사용할 수 있습니다. 그것:
- CSS 및 JS를 지원합니다
- 단일 요청으로 결합됩니다
- 최소화됩니다
- gzip/deflate compresses
- 캐시 헤더를 설정합니다
- htmlhelper 확장 메소드를 사용하여 등록 된 다음 런타임에 결합하여 포함합니다.
- IOC를 통해 플러그 가능합니다
덮개 아래에서는 Yuicompressor를 사용합니다.
나는 이것을 자동으로 처리하기 위해 무언가를 썼습니다. Google의 폐쇄 컴파일러를 사용합니다. 여기에서 코드를 읽을 수 있습니다.
감사
가이도
나는 이것이 오래된 질문이라는 것을 알고 있지만, 미니 화 검색을 할 때 먼저 나타났습니다. Gruntjs를 사용하는 것이 좋습니다. http://gruntjs.com. 완전한 웹 빌드 도구입니다.
