• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET MVC4空MVC项目添加脚本压缩和合并

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

本文介绍的是 建立的空MVC项目如何添加该功能

1.选中MVC项目,右键>"管理解决反感的NuGet程序包"

 

2.在"联机"中在线搜索搜索"Optimization",点击"安装".

 

3.在App_Start文件夹中添加类文件,类名为:BundleConfig,顶部添加"System.Web.Optimization" 引用.类里面添加一个静态方法,参数为"

BundleCollection"
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace Web
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            //添加一个JS的压缩
            //                                              请求路径             真实路径
            bundles.Add(new ScriptBundle("~/Script/index").Include( "~/Script/index.js"));

            //添加多个JS合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new ScriptBundle("~/Script/common").Include("~/Script/jquery.js", "~/Script/common.js"));

            //添加一个css压缩
            //                                              请求路径             真实路径                  
            bundles.Add(new StyleBundle("~/Style/index").Include("~/Style/index.css"));

            //添加多个css合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new StyleBundle("~/Style/common").Include("~/Style/common.css","~/Style/header.css"));

        }
    }
}

 

 

注意 :除非设置EnableOptimizations为true或设置Web.config文件中compilption 节点的debug属性为false,否则程序是不会合并和压缩文件的。 此外,系统也不会选择压缩过的脚本,而是选择调试版本。 EnableOptimizations属性的设置将会覆盖Web.config中的设置。

在 Web.config文件中compilation节点设置debug 的值可以开启或关闭压缩和合并功能。 在下面的XML中, debug设置值为true可以禁用脚本压缩和合并功能。

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

如果要启用脚本压缩和合并,则设置debug 为false 。你可以通过BundleTable 类的EnableOptimizations 属性来覆盖Web.config中的设置。 下面的代码演示了如果通过BundleTable 来覆盖Web.config文件中的设置: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace Web
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            //添加一个JS的压缩
            //                                              请求路径             真实路径
            bundles.Add(new ScriptBundle("~/Script/index").Include( "~/Script/index.js"));

            //添加多个JS合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new ScriptBundle("~/Script/common").Include("~/Script/jquery.js", "~/Script/common.js"));

            //添加一个css压缩
            //                                              请求路径             真实路径                  
            bundles.Add(new StyleBundle("~/Style/index").Include("~/Style/index.css"));

            //添加多个css合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new StyleBundle("~/Style/common").Include("~/Style/common.css","~/Style/header.css"));

            //启用压缩 合并
            BundleTable.EnableOptimizations = true;
        }
    }
}

 

 

4.在项目根目录中的"Global.asax"中的引用"System.Web.Optimization",在"Application_Start"方法中添加"   BundleConfig.RegisterBundles(BundleTable.Bundles);"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Optimization;

namespace Web
{
    // 注意: 有关启用 IIS6 或 IIS7 经典模式的说明,
    // 请访问 http://go.microsoft.com/?LinkId=9394801
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        
        }
    }
}

5.打开"Views"文件夹中的"web.config",找到截图中的节点,添加"<add namespace="System.Web.Optimization"/>"

6.在视图中引用:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>View1</title>
    <!--引用css-->
 @Styles.Render("~/Style/common")
    <!--引用JS-->
 @Scripts.Render("~/Script/index")
</head>

 

 7.搞定

 

参见:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
从零开始学习 ASP.NET MVC 1.0 (二) 识别URL的Routing组件发布时间:2022-07-10
下一篇:
Asp.Net数据控件引用AspNetPager.dll分页发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap