كيف يمكنني تلقائيا ضغط و تصغير ملفات جافا سكريبت في ASP.NET MVC التطبيق ؟

Question

لذلك لدي 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>

شكرا

Answer 1

وأنا شخصيا أعتقد أن الحفاظ على ملفات منفصلة خلال تنمية لا يقدر بثمن وأنه خلال إنتاج هو عندما يكون هناك شيء من هذا القبيل التهم. لذلك أنا تعديل السيناريو نشر بلدي من أجل القيام بذلك أعلاه.

ولدي المقطع الذي يقرأ:

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

والسيناريو بناء يأخذ كل الملفات في قسم ويجمع لهم جميعا معا. ثم يمكنني استخدام minifier YUI للحصول على إصدار مصغر من جافا سكريبت. لأن هذا يخدم IIS، وأود أن تتحول بدلا من ذلك على ضغط في IIS للحصول على ضغط غزيب. **** **** أضيفت النصي الانتشار بلدي هو السيناريو MSBuild. أنا أيضا استخدام ممتازة المهام المجتمع MSBuild ( http://msbuildtasks.tigris.org/ ) للمساعدة في نشر التطبيق.

وأنا لست بصدد الرد على ملفي النصي بأكمله هنا، ولكن هنا بعض خطوط ذات الصلة يجب أن تثبت معظم ما تقوم به.

وسيتم تشغيل المقطع التالي البناء في المجمع asp.net لنسخ تطبيق أكثر من محرك الأقراص الوجهة. (في الخطوة السابقة أنا فقط تشغيل الأوامر عمال التنفيذ صافي استخدام وتعيين حصة محرك أقراص شبكة الاتصال).

<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 / ر: الهدف كلما أحتاج للانتشار في بيئة

Answer 2

في الواقع هناك طريقة أسهل بكثير باستخدام نشر المشاريع على شبكة الإنترنت (WDP).على WDP إدارة تعقيدات aspnet__مترجم و aspnet__دمج أداة.يمكنك تخصيص عملية من قبل واجهة المستخدم داخل Visual Studio.

أما بالنسبة ضغط ملفات 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.

الفكرة هي ترك كل من شبيبة الملفات كما هي (أيdebuggable/الإنسان للقراءة).عندما يمكنك بناء الخاصة بك WDP وسوف أولا نسخ ملفات js إلى OutputPath ثم CompressJavascript الهدف هو دعا إلى التقليل من ملفات js.هذا لا تعديل على الملفات الأصلية ، فقط تلك التي في المجلد الإخراج من WDP المشروع.ثم نشر الملفات في WDPs إخراج المسار ، الذي يشمل ما قبل compilied الموقع.غطيت هذا السيناريو بالضبط في كتابي (الرابط أدناه اسمي).

يمكنك أيضا السماح WDP التعامل مع إنشاء الدليل الظاهري كذلك, مجرد التحقق من مربع و ملء اسم الدليل الظاهري.

بعض الروابط على MSBuild:

• داخل MSBuild
• 7 خطوات MSBuild
• MSDN MSBuild مستندات

سيد إبراهيم الهاشمي

كتابي: داخل مايكروسوفت بناء المحرك :باستخدام MSBuild و فريق مؤسسة بناء

Answer 3

وسكوت Hanselman المدون مؤخرا حول الجمع وتحريك النصوص إلى ملفات ثابتة ، أساسا باستخدام و 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>

في مجال تصغير الملفات الثابتة، ربما لديك ل(ويجب) استخدام أدوات التصغير في بناء / وقت النشر.

Answer 4

MvcContrib.IncludeHandling يعمل بشكل جيد لهذا الوضع. في المثال، ولدي نموذج مع مجموعة من الأنماط (سلسلة). أيضا إذا كنت بحاجة إلى إضافة العرف نمط / JS إلى الصفحة ثم يمكن أن تفعل ذلك أيضا. ثم استدعاء Html.RenderCss يجمع بين كل الأنماط / شبيبة معا في ملف واحد وminifies ذلك.

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

والجانب السلبي واضح هو الخادم يقوم به ضغط على الطاير. أعتقد أن هناك خيارات لذاكرة التخزين المؤقت النصي جنبا إلى جنب لفترة محددة والتي من شأنها أن تخفف بسرعة على الرغم من هذا.

Answer 5

كما اقترح آخرون ستكون أفضل حالا خلق ثابت مصغر بناء.بدلا من ذلك, هناك نسخة من YUICompressor المتاحة .صافي هنا: http://www.codeplex.com/YUICompressor

Answer 6

هل يمكن استخدام MvcContrib.IncludeHandling.ذلك:

• يدعم CSS و JS
• يجمع إلى طلب واحد
• Minifies
• Gzip/انكماش كمادات
• يضع رؤوس ذاكرة التخزين المؤقت
• يستخدم HTMLHelper أساليب الإرشاد إلى تسجيل يشمل ثم الجمع بينهما في وقت التشغيل
• يتم التوصيل عن طريق اللجنة الأولمبية الدولية

تحت الأغطية ، فإنه يستخدم YUICompressor.

Answer 7

وكنت قد كتبت شيئا للتعامل مع هذا بالنسبة لي تلقائيا. ويستخدم المترجم إغلاق غوغل. يمكنك أن تقرأ الشفرة هنا:

<وأ href = "http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler. ASPX "يختلط =" نوفولو noreferrer "> http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler .aspx اتصال

والشكر

وغيدو

Answer 8

وأعرف أن هذا هو السؤال القديم، ولكنه جاء لأول مرة كما كنت تفعل بعض عمليات البحث تصغير الحجم. أود أن أوصي باستخدام Gruntjs، http://gruntjs.com . بل هو أداة كاملة بناء على شبكة الإنترنت.