码迷,mamicode.com
首页 > 其他好文 > 详细

第五曲-捆绑包

时间:2015-06-06 23:32:13      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

微软提供了捆绑包这一概念来简化脚本,譬如压缩等功能,从而达到减少体积的目的。下面就来看看如何使用吧。

首先在Scripts目录下创建自己的脚本,我在这里创建的是myscript-1.0.0.js,foo.js,goo.js,或者从哪里copy一些,然后我们在BundleConfig这里添加静态方法,并注册:

public class BundleConfig
    {
        // 有关绑定的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/myscript").Include("~/Scripts/myscript-{version}.js", 
                "~/Scripts/foo.js", "~/Scripts/goo.js"));



            // 使用要用于开发和学习的 Modernizr 的开发版本。然后,当你做好
            // 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }

我们看到中间这行代码。是不是和我创建的脚本名字基本一样呢?路径也是一样的。然后我们再转到视图界面:

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

@Scripts.Render("~/bundles/myscript")
注意最后一行代码,这行代码与上面的注册字符串一模一样,运行之后发现脚本正确执行,这时候你打开开发人员工具会发现你的脚本传输大小减少了。就是这样 喵~

第五曲-捆绑包

标签:

原文地址:http://www.cnblogs.com/blackerXHunter/p/4557490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!